带有小 JS 脚本的背景图像不透明度不适用于 iOS

debugcn 发表于 Dev

迈克尔·埃德斯通

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

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

这是一个 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 有一些缺陷。当使用 like this 时没有问题：

(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>

迈克尔·埃德斯通

显然 JS 有几个问题。使用这个 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。