demo

Question

今天早些时候我问Overlay a background-image with an rgba background-color。我的目标是使用背景图像的div，当有人悬停div时，背景图像会覆盖rgba颜色。在the answer中，给出了: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-div CSS，但那并没有'工作。我也尝试将其添加到#the-div:hover和#the-div:after，但这也不起作用。

是否有一种纯CSS方法可以在带有背景图像的div中添加淡化效果？

Answer 1

是的，这是可能的。

demo

.boo {
  position: relative;
  width: 20em; min-height: 10em;
  background: rgba(0,0,0,0) url(http://placekitten.com/320/160);
  transition: background-color 1s;
}
.boo:hover {
  background-color: rgba(0,0,0,.5);
}
.boo:before {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: inherit;
  content: ' ';
}

我在这做什么？

我在这里做的是我在background-color上设置了一个RGBa div，在background-image后面并在background-color上转换了:hover（它的alpha） 1}}。所有这些都发生在背后 background-image。但是，我也在伪元素上使用background-color: inherit，这意味着，在任何给定时刻，伪元素位于其父div之上（因此高于{{1} } background-image）将具有相同的div（意味着伪元素的background-color将从background-color过渡到rgba(0,0,0,0) } rgba(0,0,0,.5)）。

为什么会这样？

我没有直接转换伪元素的:hover的原因是对伪元素的转换的支持仍然不是那么好。

支持伪元素转换

✓Firefox支持伪元素的转换，并支持它们很长一段时间，让我们先解决这个问题。

✗当前版本的 Safari 和 Opera 不支持伪元素转换。

Chrome 仅支持从版本26开始的伪元素转换。

IE10 以一种奇怪的方式支持它们，意思是：

background-color

不起作用，您还必须在元素本身上指定悬停状态。像这样：

.boo:before { color: blue; transition: 1s; }
.boo:hover:before { color: red; }

有关如何使用此.boo:hover {} .boo:before { color: blue; transition: 1s; } .boo:hover:before { color: red; }技术转换伪元素的各种属性的更多信息和示例：http://vimeo.com/51897358

修改

自从6.1开始转向Blink和Safari后，Opera现在支持直接在伪元素上进行转换。

Answer 2

尽管@Ana技术也很好，并且工作正常，允许我略微改变我对previous question的回答，并在该代码中添加转换。 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);   
}

我所做的是在div的默认状态下定义了:after伪元素，而不仅仅是在悬停状态，而是具有完全透明的背景，以及背景颜色的转换。在div的悬停时，我将伪元素的背景颜色更改为透明度较低。由于过渡，它很好地消失了。

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

使用rgba颜色覆盖背景图像，具有CSS3过渡

2 个答案:

demo

我在这做什么？

为什么会这样？

支持伪元素转换

修改