Question

我做了翻转：

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

知道出了什么问题吗？

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

它会起作用

fiddle

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

Answer 2

我猜它有毛刺，因为.inner从#opacity继承了不透明度......但我不知道为什么。有趣。

尽管如此，我还是针对您的情况采取了一种解决方法，如果您想将初始alpha保持为0.5：使.inner一半可见，请隐藏.description，除非它徘徊。< / p>

adjacent sibling selector +可用于在图像悬停时显示说明。

这是你必须添加的内容（省略现有属性）：

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

Here's a working demo for this

CSS图像不透明翻滚毛刺

2 个答案: