CSS 使用 rgba 颜色覆盖背景图像，并使用 CSS3 过渡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17135830/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Overlay a background-image with an rgba color, with a CSS3 transition
提问by Ana
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 :afterwas given:
今天早些时候，我问Overlay a background-image with an rgba background-color。我的目标是拥有一个带有背景图像的 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);
}
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-divCSS, but that didn't work. I also try to add it to #the-div:hoverand #the-div:after, but that didn't work either.
我现在想要相同的，但使用 CSS 过渡：我希望背景颜色淡入。我尝试添加transition: all 1s;到#the-divCSS，但没有奏效。我也尝试将它添加到#the-div:hoverand #the-div:after，但这也不起作用。
Is there a pure CSS way to add a fading in overlay to a div with a background-image?
是否有一种纯 CSS 方法可以将叠加淡入淡出添加到带有背景图像的 div？
回答by Ana
Yes, it is possible.
对的，这是可能的。
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: ' ';
}
What am I doing here?
我在这是要干嘛？
What I am doing here is that I am setting a RGBa background-coloron the div, behind its background-imageand transitioning this background-color(its alpha) on :hover. All this happens behindthe background-image. However, I am also using background-color: inheriton 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-imageof the div) is going to have the same background-color(meaning that the background-colorof the pseudo-element is going to transition from rgba(0,0,0,0)to rgba(0,0,0,.5)on :hover).
我在做什么这里是我设置的RGBAbackground-color上div，其背后background-image并转变这一background-color对（其alpha） :hover。所有这一切发生后面的background-image。然而，我也使用background-color: inherit伪元件，这意味着上，在任何给定时刻，伪元素，这是位于它的父以上div（并且因此上述background-image的div）都将有相同的background-color（这意味着background-color的伪元素将从 过渡rgba(0,0,0,0)到rgba(0,0,0,.5)on :hover）。
Why do it this way?
为什么要这样做？
The reason why I am not transitioning directly the background-colorof the pseudo-element is that support for transitions on pseudo-elements is still not that good yet.
我没有直接background-color转换伪元素的原因是对伪元素转换的支持还不是那么好。
Support for transitions on pseudo-elements
支持伪元素的转换
? Firefoxsupports transitions on pseudo-elements and has supported them for quite a while, let's get this out of the way first.
? Firefox支持伪元素上的转换并且已经支持它们很长一段时间了，让我们先把它排除在外。
?Current versions of Safariand Operadon't support transitions on pseudo-elements.
? 当前版本的Safari和Opera不支持伪元素上的转换。
Chromesupports transitions on pseudo-elements only starting from version 26.
Chrome仅从版本 26 开始支持伪元素的转换。
IE10supports them in a bit of a weird way, meaning that something like:
IE10以一种奇怪的方式支持它们，这意味着类似于：
.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; }
More info and examples about how you can transition various properties of pseudo-elements using this inherittechnique: http://vimeo.com/51897358
有关如何使用此inherit技术转换伪元素的各种属性的更多信息和示例：http: //vimeo.com/51897358
EDIT
编辑
Transitions directly on pseudo-elements are now supported in Opera since the switch to Blink and in Safari since 6.1.
自从切换到 Blink 以来，Opera 现在支持直接在伪元素上进行转换，而 Safari 则从 6.1 开始。
回答by Pevara
Allthough @Ana technique is also nice, and works fine, allow me to slightly alter my answer to the previous question, and add the transition in that code. http://jsfiddle.net/Pevara/N2U6B/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);
}
What I did is i defined the :afterpseudo element on the default state of the div in stead of only on the hover state, but with a fully transparent background, and a transition on the background color. On hover of the div, I change the background color of the pseudo element to be less transparent. Thanks to the transition it fades in nicely.
我所做的是:after在 div 的默认状态而不是仅在悬停状态上定义伪元素，而是使用完全透明的背景和背景颜色的过渡。在 div 悬停时，我将伪元素的背景颜色更改为不那么透明。由于过渡，它很好地淡入淡出。
The technique is basicly the same as what @Ana did, but perhaps a bit more intuitive because I don't use the background-color: inherit;. Also if the div would becomes bigger then the background image, you would not get the 'double darkness' on the edges, as demonstrated here http://codepen.io/anon/pen/cjoHrversus here http://jsfiddle.net/Pevara/N2U6B/3/
该技术与@Ana 所做的基本相同，但可能更直观一些，因为我不使用background-color: inherit;. 此外，如果 div 会变得比背景图像更大，则边缘不会出现“双重黑暗”，如此处所示http://codepen.io/anon/pen/cjoHr与此处http://jsfiddle.net /佩瓦拉/N2U6B/3/
