allow control over background color when using images (#453)
This commit is contained in:
parent
15f24f7a9a
commit
544e090bd1
5 changed files with 11 additions and 8 deletions
|
@ -1245,8 +1245,8 @@ body {
|
|||
left: 0;
|
||||
}
|
||||
|
||||
.no-transition,
|
||||
.no-transition * {
|
||||
.reveal .no-transition,
|
||||
.reveal .no-transition * {
|
||||
-webkit-transition: none !important;
|
||||
-moz-transition: none !important;
|
||||
-ms-transition: none !important;
|
||||
|
|
2
css/reveal.min.css
vendored
2
css/reveal.min.css
vendored
File diff suppressed because one or more lines are too long
|
@ -249,7 +249,8 @@ var Reveal = (function(){
|
|||
|
||||
/**
|
||||
* Creates the slide background elements and appends them
|
||||
* to the background container.
|
||||
* to the background container. One element is created per
|
||||
* slide no matter if the given slide has visible background.
|
||||
*/
|
||||
function createBackgrounds() {
|
||||
|
||||
|
@ -264,6 +265,7 @@ var Reveal = (function(){
|
|||
var data = {
|
||||
background: slide.getAttribute( 'data-background' ),
|
||||
backgroundSize: slide.getAttribute( 'data-background-size' ),
|
||||
backgroundColor: slide.getAttribute( 'data-background-color' ),
|
||||
backgroundRepeat: slide.getAttribute( 'data-background-repeat' ),
|
||||
backgroundPosition: slide.getAttribute( 'data-background-position' )
|
||||
};
|
||||
|
@ -272,7 +274,7 @@ var Reveal = (function(){
|
|||
|
||||
if( data.background ) {
|
||||
// Auto-wrap image urls in url(...)
|
||||
if( /\.(png|jpg|jpeg|gif|bmp|)$/gi.test( data.background ) ) {
|
||||
if( /\.(png|jpg|jpeg|gif|bmp)$/gi.test( data.background ) ) {
|
||||
element.style.backgroundImage = 'url('+ data.background +')';
|
||||
}
|
||||
else {
|
||||
|
@ -282,6 +284,7 @@ var Reveal = (function(){
|
|||
|
||||
// Additional and optional background properties
|
||||
if( data.backgroundSize ) element.style.backgroundSize = data.backgroundSize;
|
||||
if( data.backgroundColor ) element.style.backgroundColor = data.backgroundColor;
|
||||
if( data.backgroundRepeat ) element.style.backgroundRepeat = data.backgroundRepeat;
|
||||
if( data.backgroundPosition ) element.style.backgroundPosition = data.backgroundPosition;
|
||||
|
||||
|
|
4
js/reveal.min.js
vendored
4
js/reveal.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -54,7 +54,7 @@
|
|||
<h2>Background image</h2>
|
||||
</section>
|
||||
|
||||
<section data-background="assets/image2.png" data-background-size="100px" data-background-repeat="repeat">
|
||||
<section data-background="assets/image2.png" data-background-size="100px" data-background-repeat="repeat" data-background-color="#111" style="background: rgba(255,255,255,0.9)">
|
||||
<h2>Background image</h2>
|
||||
<code>data-background-size="100px" data-background-repeat="repeat"</code>
|
||||
</section>
|
||||
|
|
Loading…
Reference in a new issue