今天早些时候,我问了
Overlay a background-image with an rgba background-color.我的目标是拥有一个背景图像的div,当有人徘徊在div上时,背景图像被覆盖着一个rgba颜色.在
the answer年,一个解决方案：之后给了：
#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,.5);
}
我现在想要一样,但是有一个CSS转换：我想要背景颜色淡入,我尝试添加转换：所有1s;到#the-div CSS,但是没有工作.我也尝试将它添加到#the-div：hover和#the-div：after,但是也没有.
有没有一个纯CSS的方式来添加一个褪色的div与div与背景图像？
@R_403_323@
是的,这是可能的.
.boo {
position: relative;
width: 20em; min-height: 10em;
background: rgba(0,0) url(http://placekitten.com/320/160);
transition: background-color 1s;
}
.boo:hover {
background-color: rgba(0,.5);
}
.boo:before {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-color: inherit;
content: ' ';
}
我在这是要干嘛？
我在这里做的是,我在div上设置一个RGBa背景颜色,背后是背景图像,并将这个背景颜色(它的alpha)转换为：hover.所有这些都发生在背景图像之后.然而,我也在伪元素上使用background-color：inherit,这意味着在任何给定的时刻,伪元素位于其父div之上(因此位于div的背景图像之上)将具有相同的背景颜色(意味着伪元素的背景颜色将从rgba(0,0)转换为rgba(0,.5)：徘徊).
为什么这样做？
我没有直接转换伪元素的背景颜色的原因是对伪元素上的转换的支持还不是很好.
支持伪元素上的转换
✓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; }
关于如何使用这种继承技术来转换伪元素的各种属性的更多信息和示例：http://vimeo.com/51897358
编辑
Opera自6.1版开始转为Blink和Safari之后,现在直接支持伪元素的转换.
