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;
}

它会起作用

小提琴

问题还与处理这与CPU不同的GPU有关。 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;
}

这是一个有效的演示 。