javascript - 小 JS 脚本的背景图像不透明度在 iOS 上不起作用

Question

我有一些简单的标记和 CSS，可以在背景图像上生成稍微透明的彩色屏幕。添加了一个小脚本，允许背景图像在添加新类并从实心过渡到透明之前完全加载。

在桌面浏览器上看起来不错，但问题是不透明度似乎不适用于我的 iOS 设备(可能还有其他设备)。它只是纯色，没有可见的背景图像。我不太擅长 JS，所以我认为问题就在那里，但也可能是 CSS。

Here is a 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: #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>

编辑:显然 javascript 有一些缺陷。当像这样使用时没有问题:

(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

您需要使用以下代码而不是背景。

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

我在这里说明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>