用rgba背景颜色覆盖背景图像

我有一个background-image的div 。 当用户hoverdiv时，我想用rgba颜色（ rgba(0,0,0,0.1) ）覆盖背景图像。

我想知道是否有一个单独的解决scheme（即不与多个div，一个图像和一个颜色等）。

我尝试了很多东西：

 <div class="the-div" id="test-1"></div> <div class="the-div" id="test-2"></div> <div class="the-div" id="test-3"></div> 

而这个CSS：

 .the-div { background-image: url('the-image'); margin: 10px; width: 200px; height: 80px; } #test-1:hover { background-color: rgba(0,0,0,0.1); } #test-2:hover { background: url('the-image'), rgba(0,0,0,0.1); } #test-3:hover { background: rgba(0,0,0,0.1); } 

看到这个小提琴 。

我看到的唯一的select是使用覆盖，使用JavaScript预加载，然后使用.the-div:hover { background: url('the-new-image'); } .the-div:hover { background: url('the-new-image'); } 。 但是，我想要一个纯CSS的解决scheme（整洁;较less的HTTP请求;较less的硬盘）。 有没有？

Answer 1

PeterVR的解决scheme的缺点是在整个HTML块的顶部显示额外的颜色 – 这意味着它也显示在div内容之上，而不是在背景图像之上。 这很好，如果你的div是空的，但如果它不使用线性渐变可能是一个更好的解决scheme：

 <div class="the-div">Red text</div> <style type="text/css"> .the-div { background-image: url("the-image.png"); color: #f00; margin: 10px; width: 200px; height: 80px; } .the-div:hover { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png"); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png"); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png"); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png"); background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.1))), url("the-image.png"); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("the-image.png"); } </style> 

看小提琴 。 太糟糕了，渐变规格目前是一团糟。 查看兼容性表 ，上面的代码应该在任何具有显着市场份额的浏览器中工作 – 除了MSIE 9.0和更高版本。

编辑 （2017年3月）：到目前为止，networking的状态已经不那么混乱了。 因此， linear-gradient （由Firefox和Internet Explorer支持）和-webkit-linear-gradient （由Chrome，Opera和Safari支持）行就足够了，不再需要额外的前缀版本。

Answer 2

是的，有一种方法可以做到这一点。 你可以使用一个伪元素after你的背景图片上放置一个块。 像这样的东西： http : //jsfiddle.net/Pevara/N2U6B/

css为:after看起来像这样：

 #the-div:hover:after { content: ' '; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,.5); } 

编辑：
当你想把这个应用到一个非空的元素，并且只是在背景上获得叠加层的时候，你可以通过对元素应用一个正z-index来实现，而对于:after应用一个负z-index 。 像这样的东西：

 #the-div { ... z-index: 1; } #the-div:hover:after { ... z-index: -1; } 

而更新的小提琴： http : //jsfiddle.net/N2U6B/255/

Answer 3

 /* Working method */ .tinted-image { background: /* top, transparent red, faked with gradient */ linear-gradient( rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45) ), /* bottom, image */ url(https://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg); height: 1280px; width: 960px; background-size: cover; } .tinted-image p { color: #fff; padding: 100px; } 

 <div class="tinted-image"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam distinctio, temporibus tempora a eveniet quas qui veritatis sunt perferendis harum!</p> </div> 

Answer 4

理想情况下，背景属性将允许我们对各种背景进行分层，类似于http://www.css3.info/preview/multiple-backgrounds/中详细描述的背景图像分层。; 不幸的是，至less在Chrome（40.0.2214.115）中，在url（）图像背景旁边添加rgba背景似乎破坏了该属性。

我find的解决scheme是将rgba图层渲染为1px * 1px Base64编码图像并将其内联。

 .the-div:hover { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgkAQAABwAGkn5GOoAAAAASUVORK5CYII=), url("the-image.png"); } 

为base64编码的1 * 1像素图片我用http://px64.net/

这是你做的这些改变的jsfiddle。 http://jsfiddle.net/325Ft/49/ （我也把这个图像换成了在互联网上仍然存在的图像）

Answer 5

我已经得到以下工作：

 html { background: linear-gradient(rgba(0,184,255,0.45),rgba(0,184,255,0.45)), url('bgimage.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 

以上将产生一个很好的不透明的蓝色覆盖。