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

這是一個有效的演示 。