如何為圖像添加混合模式？

Question

我想在鼠標懸停時在圖像上添加一個多重混合模式效果。 現在，當我將鼠標懸停時，它只是一個純色圖層，其頂部具有不透明性。 我嘗試了背景混合模式，但是沒有用。 這是我的代碼：

 .imgwrapper { position: relative; } .showtext:hover + div { display: block; } .showtext:hover { -webkit-filter:blur(2px); filter: blur(2px); } .imagess:hover > .overlay { left: 0px; top: 0px; right:0; bottom:0; width:250px; height:250px; position:absolute; background-color:#b41f24; opacity:0.85; border-radius:0px; } .overlay #view { position: absolute; left: 108px; top: 108px; color: white; text-decoration:underline; display: block; pointer-events: none; font-size: 18px; width: 250px; letter-spacing: 4px; } 

 <a href="single-illustration-sidebar-left.html" class="permalink"> <div class="desktop-3 mobile-half columns"> <div class="item"> <h3>Pawsome</h3> <span class="category">ux/ui, web</span> <div class="imgwrapper"> <div class="imagess"> <img class="showtext" src="images/thumb_item09.png" /> <div class="overlay"> <div id="view">view</div></div></div></div> </div> </div><!-- // .item --> <!-- // .desktop-3 --> </a> 

謝謝

Answer 1

這應該對您有幫助。

您需要將圖像作為background-image來添加blending-mode 。

 .imgwrapper { position: relative; } .showtext { width: 250px; height: 250px; background-image: url(https://unsplash.it/200/300/?random); background-size: cover; background-color: #b41f24; transition: all 0.1s ease; } .showtext:hover + div { display: block; } .showtext:hover { -webkit-filter: blur(2px); filter: blur(2px); background-blend-mode: multiply; } .overlay #view { position: absolute; left: 108px; top: 108px; color: white; text-decoration: underline; display: block; pointer-events: none; font-size: 18px; width: 250px; letter-spacing: 4px; z-index: 100; } 

 <a href="single-illustration-sidebar-left.html" class="permalink"> <div class="desktop-3 mobile-half columns"> <div class="item"> <h3>Pawsome</h3> <span class="category">ux/ui, web</span> <div class="imgwrapper"> <div class="imagess"> <div class="showtext"></div> <div class="overlay"> <div id="view">view</div> </div> </div> </div> </div> </div> <!-- // .item --> <!-- // .desktop-3 --> </a>