使用rgba颜色，CSS3过渡覆盖背景图像 [英] Overlay a background-image with an rgba color, with a CSS3 transition

问题描述

今天上午，我问了使用rgba背景颜色覆盖背景图片。我的目标是有一个背景图像的div，当有人徘徊div，背景图像覆盖一个rgba颜色。在答案中，提供了：之后的解决方案：

Earlier today I asked Overlay a background-image with an rgba background-color. My goal is to have a div with a background-image, and when someone hovers the div, the background-image gets overlayed with an rgba color. In the answer, a solution with :after was given:

#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);
}

我现在想拥有相同的，我尝试向＃the-div 添加 transition：all 1s; CSS，但是没有工作。我也尝试添加到＃the-div：hover 和＃the-div：after 后，

I now would like to have the same, but with a CSS transition: I'd like the background color to fade in. I tried adding transition: all 1s; to the #the-div CSS, but that didn't work. I also try to add it to #the-div:hover and #the-div:after, but that didn't work either.

有一个纯CSS方法在叠加中添加一个淡入淡出到一个背景图像的div？

Is there a pure CSS way to add a fading in overlay to a div with a background-image?

推荐答案

可以。

.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 后面。但是，我还在伪元素上使用 background-color：inherit ，这意味着在任何给定时刻，伪元素 div （因此高于 div background-image >）将具有相同的 background-color （意味着伪元素的 background-color 将从 rgba（0,0,0,0）转换为 rgba（0,0,0，.5） ：hover ）。

What am I doing here?

What I am doing here is that I am setting a RGBa background-color on the div, behind its background-image and transitioning this background-color (its alpha) on :hover. All this happens behind the background-image. However, I am also using background-color: inherit on the pseudo-element, which means that, at any given moment, the pseudo-element, which is situated above its parent div (and therefore above the background-image of the div) is going to have the same background-color (meaning that the background-color of the pseudo-element is going to transition from rgba(0,0,0,0) to rgba(0,0,0,.5) on :hover).

之所以我不直接转换伪元素的 background-color

The reason why I am not transitioning directly the background-color of the pseudo-element is that support for transitions on pseudo-elements is still not that good yet.

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

✓ Firefox supports transitions on pseudo-elements and has supported them for quite a while, let's get this out of the way first.

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

✗ Current versions of Safari and Opera don't support transitions on pseudo-elements.

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

Chrome supports transitions on pseudo-elements only starting from version 26.

IE10 一种奇怪的方式，意思是这样的：

IE10 supports them in a bit of a weird way, meaning that something like:

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

将无法工作，您还必须在元素本身上指定悬停状态。像这样：

won't work, you have to specify the hover state on the element itself as well. Like this:

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

---

更多信息和示例使用此继承技术的伪元素的各种属性： http：// vimeo .com / 51897358

---

More info and examples about how you can transition various properties of pseudo-elements using this inherit technique: http://vimeo.com/51897358

直接在伪元素上的转换现在支持从Opera自从6.1之后切换到Blink和Safari。

Transitions directly on pseudo-elements are now supported in Opera since the switch to Blink and in Safari since 6.1.

这篇关于使用rgba颜色，CSS3过渡覆盖背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！