17

今天早些时候，我问Overlay 一个带有 rgba 背景颜色的背景图像。我的目标是有一个带有背景图像的 div，当有人悬停 div 时，背景图像会被 rgba 颜色覆盖。在答案中，给出了一个解决方案:after：

#the-div {
    background-image: url('some-url');
}

#the-div:hover:after {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5);
}

我现在想拥有相同的效果，但使用 CSS 过渡：我希望背景颜色淡入。我尝试添加transition: all 1s;到#the-divCSS，但没有奏效。我也尝试将它添加到#the-div:hoverand #the-div:after，但这也不起作用。

有没有一种纯 CSS 方法可以将淡入淡出的叠加层添加到带有背景图像的 div 中？

4

2 回答 2

33
于 2013-06-16T18:09:13.797 回答
5

尽管@Ana 技术也不错，而且工作正常，但请允许我稍微改变对上一个问题的回答，并在该代码中添加过渡。 http://jsfiddle.net/Pevara/N2U6B/2/

#the-div {
    width: 500px;
    height: 500px;
    background: url(http://placekitten.com/500/500) no-repeat center center;
    position: relative;
}

#the-div:after {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0);
    transition: background-color .5s;
}
#the-div:hover:after {
    background-color: rgba(0,0,0,.5);   
}

我所做的是我:after在 div 的默认状态上定义了伪元素，而不仅仅是在悬停状态上，而是具有完全透明的背景和背景颜色的过渡。在 div 悬停时，我将伪元素的背景颜色更改为不那么透明。由于过渡它很好地淡入淡出。

该技术与@Ana 所做的基本相同，但可能更直观一些，因为我不使用background-color: inherit;. 此外，如果 div 变得比背景图像大，则边缘不会出现“双重黑暗”，如此处所示http://codepen.io/anon/pen/cjoHr与此处http://jsfiddle.net /佩瓦拉/N2U6B/3/

于 2013-06-16T18:28:55.573 回答