Sie sind nicht angemeldet.

Lieber Besucher, herzlich willkommen bei: krpano.com Forum. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

1

Samstag, 7. Juli 2018, 02:14

CSS background-blend-mode for Layers

Hello!
I'm working on a tour and the designer sent me an interface with a layer with transparency which is actually a "multiply" blend mode from Illustrator.
I was looking is this is posible to do with CSS and I found the "background-blend-mode:" parameter. I think this should be very easy to implement since it's a native CSS parameter.

There's more information about this CSS parameter in this link: https://css-tricks.com/basics-css-blend-modes/

would be very nice to have this option.

thanks!
Ariel M.
Build and Customize your virtual tours with Spinattic
www.spinattic.com

My profile in Spinattic

2

Sonntag, 8. Juli 2018, 16:18

Hi,

here some example code to set CSS styles of layers:

Source code

1
2
3
4
5
6
7
<action name="set_css_style" type="Javascript">
  caller.sprite.style[ args[1] ] = args[2];
</action>

<layer ...
    onloaded="set_css_style('backgroundBlendMode', 'multiply');"
    />


But if with CSS background-blend would do what you want and work in all browsers is another question...

Best regards,
Klaus

3

Freitag, 13. Juli 2018, 21:35

@ klaus:

can i ask you why you're using 'backgroundBlendMode' and not 'background-blend-mode' in the call?

does it not work with standard css attribute names?
i tried to set a background-color or backgroundColor but didnt succeed....

mylayer.sprite.style seems to be a CSSStyleDeclaration (?)
but also mylayer.sprite.style.setProperty(propertyName, value, priority); does not work

best, index

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »indexofrefraction« (13. Juli 2018, 21:57)


jordi

Fortgeschrittener

Beiträge: 416

Wohnort: Barcelona

Beruf: creating ideas & coding them

  • Nachricht senden

4

Samstag, 14. Juli 2018, 17:49

You can not use - you have to use camel case notation when setting css attributes from JavaScript
everpano.com smart virtual tours

5

Samstag, 14. Juli 2018, 20:38

@jordi: backgroundColor does not work, too
do you have a link where the camel case naming is documented?

i suspect maybe krpano updates / refreshes
most css attributes with the values from the xml (?)

6

Gestern, 22:11

do you have a link where the camel case naming is documented?

Here some links:
https://developer.mozilla.org/en-US/docs…rties_Reference
https://javascript.info/styles-and-classes#element-style

You could also use the developer tools of the browser to see the available proprieties,
e.g. try:

Source code

1
console.dir(document.documentElement.style) 
to see the properties of a CSSStyleDeclaration object.


i suspect maybe krpano updates / refreshes
most css attributes with the values from the xml (?)
Not 'most', but the 'background' CSS style will be set/updated already by krpano.

Best regards,
Klaus