悬停时图像上的颜色叠加

时间：2015-03-19 12:35:27

标签： html css

我有这个例子：

https://jsfiddle.net/3q81h1es/

＆＃13;
＆＃13; 
.image1 {
  display: inline-block;
  height: 300px;
  width: 300px;
  background: url("http://www.avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/images1440/b1.jpg");
  margin-left: auto;
  vertical-align: top;
}
.image1:hover {
  opacity: 0.3;
  filter: alpha(opacity=30);
}
＆＃13; 
<div class="image1"></div>
＆＃13;
＆＃13;
＆＃13;

我想制作蓝雾效果，如下图所示：

enter image description here

你能帮我解决这个问题吗？

我试图添加.wrap{background:blue;}，但遗憾的是没有工作。

4 个答案:

答案 0 :(得分：1)

您可以使用蓝色叠加层。可以使用伪元素进行叠加并在悬停时显示：

＆＃13;
＆＃13; 
.image1 {
  display: inline-block;
  height: 300px;
  width: 300px;
  background: url("http://www.avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/images1440/b1.jpg");
  margin-left: auto;
  vertical-align: top;
}
.image1:hover:after {
  content:'';
  display:block;
  height:100%;
  background:blue;
  opacity:0.3;
  filter: alpha(opacity=30);
}
＆＃13; 
<div class="image1"></div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您可以在悬停时使用单一颜色渐变来使用第二个额外背景。

＆＃13;
＆＃13; 
.image1 {
  display: inline-block;
  height: 300px;
  width: 300px;
  background: url("http://www.avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/images1440/b1.jpg");
  margin-left: auto;
  vertical-align: top;
}
.image1:hover {
  background: linear-gradient(to bottom, rgba(0, 0, 128, 0.25), rgba(0, 0, 128, 0.25)), url("http://www.avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/images1440/b1.jpg");
}
＆＃13; 
<div class="image1">


</div>
＆＃13;
＆＃13;
＆＃13;

作为替代方案，如果div具有内容，则定位伪元素。

＆＃13;
＆＃13; 
.image1 {
  display: inline-block;
  height: 300px;
  width: 300px;
  background: url("http://www.avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/images1440/b1.jpg");
  margin-left: auto;
  vertical-align: top;
  color: white;
  position: relative;
  z-index: 1;
}
.image1:hover:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 128, 0.5);
  z-index: -1;
}
＆＃13; 
<div class="image1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde magni officia odit enim magnam eaque modi illo dolorum necessitatibus cumque dolore recusandae nisi eos. Libero!</p>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

您可以使用CSS Blend Modes

Browser Support is quite good（IE除外）

FIDDLE

＆＃13;
＆＃13; 
.image1 {
  display: inline-block;
  height: 300px;
  width: 300px;
  background: url("http://www.avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/images1440/b1.jpg");
  margin-left: auto;
  vertical-align: top;
}
.image1:hover {
  background-color: rgba(0, 0, 255, .3);
  background-blend-mode: multiply;
}
＆＃13; 
<div class="image1"></div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

更改块不透明度也会更改其内容，因此您也可以尝试使用伪元素和rgba()背景颜色更改叠加层的Alpha通道

＆＃13;
＆＃13; 
.image1:hover:after {
    background-color: rgba(0, 0, 255, 0.3);
    content: "";
    height: 100%;
    position: absolute;
    width: 100%;
}
.image1 {
    background: url("http://www.avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/images1440/b1.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: inline-block;
    height: 300px;
    margin-left: auto;
    position: relative;
    vertical-align: top;
    width: 300px;
}
＆＃13; 
<div class="image1"></div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题