大佬教程收集整理的这篇文章主要介绍了使用rgba颜色覆盖背景图像,并进行CSS3转换，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
#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与背景图像？
@L_262_2@
.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之后,现在直接支持伪元素的转换.
以上是大佬教程为你收集整理的使用rgba颜色覆盖背景图像,并进行CSS3转换全部内容，希望文章能够帮你解决使用rgba颜色覆盖背景图像,并进行CSS3转换所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。