data-background-content-opacity -> data-background-opacity
This commit is contained in:
parent
4ba0d73345
commit
042fbde61b
|
@ -630,7 +630,7 @@ By default, background images are resized to cover the full page. Available opti
|
||||||
| data-background-size | cover | See [background-size](https://developer.mozilla.org/docs/Web/CSS/background-size) on MDN. |
|
| data-background-size | cover | See [background-size](https://developer.mozilla.org/docs/Web/CSS/background-size) on MDN. |
|
||||||
| data-background-position | center | See [background-position](https://developer.mozilla.org/docs/Web/CSS/background-position) on MDN. |
|
| data-background-position | center | See [background-position](https://developer.mozilla.org/docs/Web/CSS/background-position) on MDN. |
|
||||||
| data-background-repeat | no-repeat | See [background-repeat](https://developer.mozilla.org/docs/Web/CSS/background-repeat) on MDN. |
|
| data-background-repeat | no-repeat | See [background-repeat](https://developer.mozilla.org/docs/Web/CSS/background-repeat) on MDN. |
|
||||||
| data-background-content-opacity | 1 | Opacity of the background image on a 0-1 scale. 0 is transparent and 1 is fully opaque. |
|
| data-background-opacity | 1 | Opacity of the background image on a 0-1 scale. 0 is transparent and 1 is fully opaque. |
|
||||||
```html
|
```html
|
||||||
<section data-background-image="http://example.com/image.png">
|
<section data-background-image="http://example.com/image.png">
|
||||||
<h2>Image</h2>
|
<h2>Image</h2>
|
||||||
|
@ -649,7 +649,7 @@ Automatically plays a full size video behind the slide.
|
||||||
| data-background-video-loop | false | Flags if the video should play repeatedly. |
|
| data-background-video-loop | false | Flags if the video should play repeatedly. |
|
||||||
| data-background-video-muted | false | Flags if the audio should be muted. |
|
| data-background-video-muted | false | Flags if the audio should be muted. |
|
||||||
| data-background-size | cover | Use `cover` for full screen and some cropping or `contain` for letterboxing. |
|
| data-background-size | cover | Use `cover` for full screen and some cropping or `contain` for letterboxing. |
|
||||||
| data-background-content-opacity | 1 | Opacity of the background video on a 0-1 scale. 0 is transparent and 1 is fully opaque. |
|
| data-background-opacity | 1 | Opacity of the background video on a 0-1 scale. 0 is transparent and 1 is fully opaque. |
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-video-loop data-background-video-muted>
|
<section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-video-loop data-background-video-muted>
|
||||||
|
|
|
@ -934,7 +934,7 @@
|
||||||
backgroundRepeat: slide.getAttribute( 'data-background-repeat' ),
|
backgroundRepeat: slide.getAttribute( 'data-background-repeat' ),
|
||||||
backgroundPosition: slide.getAttribute( 'data-background-position' ),
|
backgroundPosition: slide.getAttribute( 'data-background-position' ),
|
||||||
backgroundTransition: slide.getAttribute( 'data-background-transition' ),
|
backgroundTransition: slide.getAttribute( 'data-background-transition' ),
|
||||||
backgroundContentOpacity: slide.getAttribute( 'data-background-content-opacity' )
|
backgroundOpacity: slide.getAttribute( 'data-background-opacity' )
|
||||||
};
|
};
|
||||||
|
|
||||||
// Main slide background element
|
// Main slide background element
|
||||||
|
@ -968,7 +968,7 @@
|
||||||
data.backgroundRepeat +
|
data.backgroundRepeat +
|
||||||
data.backgroundPosition +
|
data.backgroundPosition +
|
||||||
data.backgroundTransition +
|
data.backgroundTransition +
|
||||||
data.backgroundContentOpacity );
|
data.backgroundOpacity );
|
||||||
}
|
}
|
||||||
|
|
||||||
// Additional and optional background properties
|
// Additional and optional background properties
|
||||||
|
@ -980,7 +980,7 @@
|
||||||
if( data.backgroundSize ) contentElement.style.backgroundSize = data.backgroundSize;
|
if( data.backgroundSize ) contentElement.style.backgroundSize = data.backgroundSize;
|
||||||
if( data.backgroundRepeat ) contentElement.style.backgroundRepeat = data.backgroundRepeat;
|
if( data.backgroundRepeat ) contentElement.style.backgroundRepeat = data.backgroundRepeat;
|
||||||
if( data.backgroundPosition ) contentElement.style.backgroundPosition = data.backgroundPosition;
|
if( data.backgroundPosition ) contentElement.style.backgroundPosition = data.backgroundPosition;
|
||||||
if( data.backgroundContentOpacity ) contentElement.style.opacity = data.backgroundContentOpacity;
|
if( data.backgroundOpacity ) contentElement.style.opacity = data.backgroundOpacity;
|
||||||
|
|
||||||
element.appendChild( contentElement );
|
element.appendChild( contentElement );
|
||||||
container.appendChild( element );
|
container.appendChild( element );
|
||||||
|
|
Loading…
Reference in New Issue