css – 使用rgba背景颜色覆盖背景图像

前端之家收集整理的这篇文章主要介绍了css – 使用rgba背景颜色覆盖背景图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个背景图像的div。我想覆盖背景图像与rgba颜色(rgba(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.1);
}

#test-2:hover {
    background: url('the-image'),rgba(0,0.1);
}

#test-3:hover {
    background: rgba(0,0.1);
}

this fiddle

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

解决方法

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,0.1),0.1)),url("the-image.png");
    background-image: -moz-linear-gradient(top,url("the-image.png");
    background-image: -o-linear-gradient(top,url("the-image.png");
    background-image: -ms-linear-gradient(top,url("the-image.png");
    background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(0,to(rgba(0,0.1))),url("the-image.png");
    background-image: -webkit-linear-gradient(top,url("the-image.png");
  }
</style>

fiddle.太糟糕了,梯度规格目前是一团糟。看到compatibility table,上面的代码应该在任何具有显着市场份额的浏览器中工作 – 除了MSIE 9.0及更早版本。

原文链接:https://www.f2er.com/css/220549.html

猜你在找的CSS相关文章