颜色叠加在悬停

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

<div class="image1"></div>

我想打一个蓝色的烟雾效果，像下面的图片：

enter image description here

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

我试图添加.wrap{background:blue;}，但不幸运行。

来源

2015-03-19 Diaconescu

链接没有按”尝试覆盖的改变alpha通道t工作，并没有提供图像。 – 2015-03-19 12:37:27

https://jsfiddle.net/3q81h1es/3/如果您不必支持旧浏览器 – 2015-03-19 12:45:15

改变块不透明度也会改变它的内容，所以你也可以使用伪元素和rgba()背景色

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

<div class="image1"></div>

来源

2015-03-19 12:59:36 adriano66

您可以在悬停时使用单个颜色渐变使用第二个附加背景。

.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"); 
 
}

<div class="image1"> 
 

 

 
</div>

作为替代，定位伪元素如果在div将有内容。

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

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

来源

2015-03-19 12:42:25

您可以使用蓝色覆盖。这种叠加可以与伪元素制成并显示在悬停：

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

<div class="image1"></div>

来源

2015-03-19 12:50:21

你可以使用CSS Blend Modes

Browser Support is quite good（除IE）

FIDDLE

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

<div class="image1"></div>

来源

2015-03-19 12:55:17 Danield

颜色叠加在悬停

回答

相关问题