如何将混合模式添加到图像？

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

这应该对你有帮助。

您需要将图片作为and_gate_2(a,b,c); 添加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;
}