CSS图像不透明度滚动故障

Question

我进行了此滚动：

jsfiddle.net/DH6Lu/

但正如你所看到的，背景图像出现了故障。当我不在主div上使用opacity时，情况并非如此：

http://jsfiddle.net/6KT9p/

知道怎么了吗？

<div id="opacity">
    <div class="box">
        <a class="link" href="#">
            <div class="inner">
                <img src="http://lorempixel.com/340/192/" width="340" height="192">
                <div class="description">
                    <h3>titel2</h3>
                </div>
            </div>
        </a>
    </div>
</div>

.box {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.inner {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
}
.inner img {
    position: absolute;
    opacity: 1;
    -webkit-transition: opacity  0.5s ease;
}
.inner img:hover {
    opacity: 0.15
}
.description {
    background: url(http://www.merkendiewerken.be/wp-content/themes/merkendiewerken/img/close-recent.png) #aaa repeat 0 0 fixed;
    width: 340px;
    height: 192px;
    position: absolute;
    z-index: -1;
}
.description h3 {
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
    text-align: center;
    position: absolute;
}
#opacity {
    opacity: 0.5
}

Answer 1

问题源于后台的固定属性。将CSS设置为

.description {
    background: url(http://www.merkendiewerken.be/wp-content/themes/merkendiewerken/img/close-recent.png) #aaa repeat 0 0;
    width: 340px;
    height: 192px;
    position: absolute;
    z-index: -1;
}

它将工作

小提琴

这个问题还与GPU处理这种与CPU不同的问题有关。GPU在转换过程中处理背景，CPU处于静态状态。如果设置transform:translateZ（1px）（启用GPU的常用技巧之一），背景将永久处于偏移中。它解决了故障，但外观不正确。

Answer 2

我想它会出现故障，因为.inner继承了#opacity的不透明度。。。但我不知道为什么。有趣的

不过，对于您的情况，我有一个变通方法，如果您想将初始alpha保持为0.5：使.inner半可见，隐藏.description，除非它悬停。

相邻同级选择器+用于在图像悬停时显示描述。

以下是您必须添加的内容（省略现有属性）：

.inner img {
    -webkit-transition: opacity 0.5s ease;
    opacity:0.5;
}
.inner img:hover{
    opacity:0.15;
}
.inner img:hover + .description{
    opacity:1;
}
.description {
    -webkit-transition: opacity 0.5s ease;
    opacity:0;
}

这是一个工作演示。