用rgba背景颜色叠加背景图像

时间:2013-06-16 15:39:32

标签: css css3 background background-image rgba

我有div background-image。当用户悬停div时,我想用rgba颜色(rgba(0,0,0,0.1))覆盖背景图像。

我想知道是否有一个div解决方案(即没有多个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);
}

请参阅this fiddle

我看到的唯一选择是制作另一张图片,使用叠加,使用JavaScript预加载,然后使用.the-div:hover { background: url('the-new-image'); }。但是,我想要一个仅限CSS的解决方案(更整洁;更少的HTTP请求;更少的硬盘)。有没有?

5 个答案:

答案 0 :(得分:48)

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

<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>

fiddle。太糟糕了,梯度规格目前是一团糟。请参阅compatibility table,上述代码可以在任何具有值得注意的市场份额的浏览器中使用 - 除了MSIE 9.0及更早版本。

编辑(2017年3月):到目前为止,网络的状态变得更加混乱。因此,linear-gradient(由Firefox和Internet Explorer支持)和-webkit-linear-gradient(由Chrome,Opera和Safari支持)行就足够了,不再需要额外的前缀版本。

答案 1 :(得分:35)

是的,有办法做到这一点。您可以使用伪元素after将块放置在背景图像的顶部。像这样的东西: http://jsfiddle.net/Pevara/N2U6B/

:after的css如下所示:

#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应用负数来实现。 。像这样:

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

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

答案 2 :(得分:5)

&#13;
&#13;
/* 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;
  }
&#13;
<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>
&#13;
&#13;
&#13;

来源:https://css-tricks.com/tinted-images-multiple-backgrounds/

答案 3 :(得分:3)

理想情况下,背景属性允许我们分层各种背景,类似于http://www.css3.info/preview/multiple-backgrounds/中详述的背景图像分层。不幸的是,至少在Chrome(40.0.2214.115)中,在url()图像背景旁添加rgba背景似乎打破了属性。

我发现的解决方案是将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/(我还将图片换成了仍然存在于互联网上的图片)

答案 4 :(得分:0)

我已经完成了以下工作:

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

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