顏色疊加在懸停

.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

顏色疊加在懸停

回答

相關問題