xobs/fa20-bt
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

allow control over background color when using images (#453)

Browse Source
This commit is contained in:
Hakim El Hattab
2013-06-04 20:25:47 +02:00
parent 15f24f7a9a
commit 544e090bd1
5 changed files with 11 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
css/reveal.css
View File

@@ -1245,8 +1245,8 @@ body {
left: 0; left: 0;
} }
.no-transition, .reveal .no-transition,
.no-transition * { .reveal .no-transition * {
-webkit-transition: none !important; -webkit-transition: none !important;
-moz-transition: none !important; -moz-transition: none !important;
-ms-transition: none !important; -ms-transition: none !important;

2
css/reveal.min.css vendored
View File

File diff suppressed because one or more lines are too long

7
js/reveal.js
View File

@@ -249,7 +249,8 @@ var Reveal = (function(){
/** /**
* Creates the slide background elements and appends them * 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() { function createBackgrounds() {
@@ -264,6 +265,7 @@ var Reveal = (function(){
var data = { var data = {
background: slide.getAttribute( 'data-background' ), background: slide.getAttribute( 'data-background' ),
backgroundSize: slide.getAttribute( 'data-background-size' ), backgroundSize: slide.getAttribute( 'data-background-size' ),
backgroundColor: slide.getAttribute( 'data-background-color' ),
backgroundRepeat: slide.getAttribute( 'data-background-repeat' ), backgroundRepeat: slide.getAttribute( 'data-background-repeat' ),
backgroundPosition: slide.getAttribute( 'data-background-position' ) backgroundPosition: slide.getAttribute( 'data-background-position' )
}; };
@@ -272,7 +274,7 @@ var Reveal = (function(){
if( data.background ) { if( data.background ) {
// Auto-wrap image urls in url(...) // 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 +')'; element.style.backgroundImage = 'url('+ data.background +')';
} }
else { else {
@@ -282,6 +284,7 @@ var Reveal = (function(){
// Additional and optional background properties // Additional and optional background properties
if( data.backgroundSize ) element.style.backgroundSize = data.backgroundSize; 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.backgroundRepeat ) element.style.backgroundRepeat = data.backgroundRepeat;
if( data.backgroundPosition ) element.style.backgroundPosition = data.backgroundPosition; if( data.backgroundPosition ) element.style.backgroundPosition = data.backgroundPosition;

4
js/reveal.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
test/background.html
View File

@@ -54,7 +54,7 @@
<h2>Background image</h2> <h2>Background image</h2>
</section> </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> <h2>Background image</h2>
<code>data-background-size="100px" data-background-repeat="repeat"</code> <code>data-background-size="100px" data-background-repeat="repeat"</code>
</section> </section>