背景图像不透明与小JS脚本无法在iOS上工作

Question

I have some simple markup and CSS that generates a slightly transparent color screen over a background image. A small script has been added which allows the background image to fully load before adding a new class and transitioning from a solid to transparent.

Looks good on desktop browsers, but the issue is that the opacity doesn't seem to be working on my iOS devices (and possibly other devices too). It's just a solid color with no background image visible. I'm not very good at JS so I assume the problem is there, but it could be the CSS.

Here is a JSFiddle and the code is also embedded below. Thanks in advance; any help is greatly appreciated.

 (function(el) { el.forEach(function(e) { var style = e.currentStyle || window.getComputedStyle(e, false), bi = style.backgroundImage.slice(5, -2); var img = new Image(); img.onload = function() { e.classList.add('loaded'); } img.src = bi; }); })(document.querySelectorAll('.title-area')); 

 .title-area * { position: relative; color: #fff; padding: 5px; } .title-area { background-color: #d9554c; background-size: cover; background-position: 50%; position: relative; background-image: url(https://unsplash.it/1000/500?image=206); } .title-area::before { content: ''; position: absolute; width: 100%; height: 100%; background: #d9554c; opacity: 1; transition: opacity 0.5s; } .title-area.loaded::before { opacity: 0.5; transform: translateZ(0); } 

 <div id="content" class="title-area title-area-3"> <div class="title-area-wrapper"> <div class="title-area-content constrain"> <h2 class="sub-header portfolio-header">Content header</h2> </div> </div> </div> 

EDIT: Apparently the javascript had some imperfections. When used liked this there is no issue:

 (function(el){ el.forEach(function(e) { var style = e.currentStyle || window.getComputedStyle(e, false), bi = style.backgroundImage.slice(4, -1).replace(/["|']/g, ""); var img = new Image(); img.onload = function() { e.classList.add('loaded'); } img.src = bi; }); })(document.querySelectorAll('.title-area')); 

 .title-area * { position: relative; color: #fff; padding: 5px; } .title-area { background-color: #d9554c; background-size: cover; background-position: 50%; position: relative; background-image: url(https://unsplash.it/1000/500?image=206); } .title-area::before { content: ''; position: absolute; width: 100%; height: 100%; background: #d9554c; opacity: 1; transition: opacity 0.5s; } .title-area.loaded::before { opacity: 0.5; transform: translateZ(0); } 

 <div id="content" class="title-area title-area-3"> <div class="title-area-wrapper"> <div class="title-area-content constrain"> <h2 class="sub-header portfolio-header">Content header</h2> </div> </div> </div> 

Answer 1

You need to use the following code rather then background .

background-color: rgb(255,255,255); // White background for old browsers
background-color: rgba(255,255,255,0.5); // White background, 50% transparency

Here I mentation JSFiddle .

 (function(el){ el.forEach(function(e) { var style = e.currentStyle || window.getComputedStyle(e, false), bi = style.backgroundImage.slice(5, -2); var img = new Image(); img.onload = function() { e.classList.add('loaded'); } img.src = bi; }); })(document.querySelectorAll('.title-area')); 

 .title-area * {position: relative; color: #fff; padding: 5px;} .title-area {background-color: rgba(255, 27, 66, 0.5); background-size: cover; background-position: 50%; position: relative; background-image: url(https://unsplash.it/1000/500?image=206);} .title-area::before {content: ''; position: absolute; width: 100%; height: 100%; background-color: rgba(255, 27, 66, 0.5); opacity: 1; transition: opacity 0.5s;} .title-area.loaded::before {opacity: 0.5; transform: translateZ(0);} 

 <div id="content" class="title-area title-area-3"> <div class="title-area-wrapper"> <div class="title-area-content constrain"> <h2 class="sub-header portfolio-header">Content header</h2> </div> </div> </div> 

Answer 2

Apparently the JS had a couple issues with it. Using this Javascript fixes the problem.

 (function(el){ el.forEach(function(e) { var style = e.currentStyle || window.getComputedStyle(e, false), bi = style.backgroundImage.slice(4, -1).replace(/["|']/g, ""); var img = new Image(); img.onload = function() { e.classList.add('loaded'); } img.src = bi; }); })(document.querySelectorAll('.title-area')); 

 .title-area * { position: relative; color: #fff; padding: 5px; } .title-area { background-color: #d9554c; background-size: cover; background-position: 50%; position: relative; background-image: url(https://unsplash.it/1000/500?image=206); } .title-area::before { content: ''; position: absolute; width: 100%; height: 100%; background: #d9554c; opacity: 1; transition: opacity 0.5s; } .title-area.loaded::before { opacity: 0.5; transform: translateZ(0); } 

 <div id="content" class="title-area title-area-3"> <div class="title-area-wrapper"> <div class="title-area-content constrain"> <h2 class="sub-header portfolio-header">Content header</h2> </div> </div> </div>