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

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

我在这里做什么？

我在这里所做的是在div 上设置一个RGBa background-color，在它的background-image 后面，并在:hover 上转换这个background-color（它的alpha）。所有这一切都发生在background-image 之后。但是，我也在伪元素上使用background-color: inherit，这意味着在任何给定时刻，伪元素位于其父div之上（因此在@987654333的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

---

编辑

自从切换到 Blink 以来，Opera 现在支持直接在伪元素上的过渡，而 Safari 从 6.1 开始支持。

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/ 所展示的那样