覆盖一个rgba颜色的背景图像，使用CSS3过渡

Question

今天早些时候，我要求使用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-div CSS，但这不起作用。我还尝试将其添加到#the-div:hover和#the-div:after，但这也不起作用。

是否有一个纯CSS的方式来添加一个褪色的覆盖与背景图像的div ?

Answer 1

是可能的。

演示

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

我在这里干什么?

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

---

为什么这样做?

我不直接转换伪元素的background-color的原因是对伪元素上的转换的支持还不是很好。

支持伪元素的过渡

✓Firefox支持伪元素的过渡，并且已经支持了很长一段时间了，让我们先解决这个问题。

当前版本的Safari和Opera不支持伪元素的过渡。

Chrome仅从版本26开始支持伪元素的过渡。

IE10以一种有点奇怪的方式支持它们，这意味着像

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

不起作用，你必须在元素本身上指定悬停状态。这样的:

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

---

关于如何使用inherit技术转换伪元素的各种属性的更多信息和示例:http://vimeo.com/51897358

---

编辑

从Opera切换到Blink开始，直接在伪元素上进行过渡，Safari从6.1开始也支持。

Answer 2

虽然@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);   
}

我所做的是在div的默认状态上定义:after伪元素，而不是只在悬停状态上定义，但具有完全透明的背景，并在背景颜色上进行过渡。在div的悬停位置，我将pseudo元素的背景颜色更改为不那么透明。多亏了过渡，它很好地淡入。

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