今天早些时候我问使用 rgba 背景颜色覆盖背景图像 https://stackoverflow.com/q/17134929/1544337。我的目标是拥有一个带有背景图像的 div，当有人将鼠标悬停在 div 上时，背景图像会覆盖有 rgba 颜色。在答案 https://stackoverflow.com/a/17134984/1544337，一个解决方案: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; to the #the-divCSS，但这不起作用。我也尝试将其添加到#the-div:hover and #the-div:after，但这也不起作用。

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

对的，这是可能的。

demo http://codepen.io/thebabydino/pen/AtzpB

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

我在这是要干嘛？

我在这里所做的是设置 RGBabackground-color on the div，其背后background-image并过渡这个background-color（其阿尔法）:hover。这一切的发生behind the background-image。不过，我也在使用background-color: inherit在伪元素上，这意味着在任何给定时刻，位于其父元素之上的伪元素div（因此高于background-image of the div）将会有相同的background-color（这意味着background-color伪元素的将从rgba(0,0,0,0) to rgba(0,0,0,.5) on :hover).

为什么要这样做呢？

我不直接过渡的原因background-color伪元素的一个问题是对伪元素转换的支持还不是很好。

支持伪元素的转换

✓ 火狐浏览器支持伪元素的转换并且已经支持它们很长一段时间了，让我们先解决这个问题。

✗当前版本Safari and 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 http://vimeo.com/51897358

EDIT

自切换到 Blink 以来，Opera 和 Safari 自 6.1 以来现在支持直接在伪元素上进行转换。