如何使用css向<img>元素添加渐变覆盖？
如何使用css向<img>元素添加渐变覆盖？
提问于 2018-06-11 03:15:35
我正在制作这个page section的html标记。正如你在这里看到的，它是三个图像。当我将鼠标光标放在其中的一个上时，图像会发生移位，并与线性渐变叠加。图像的编码
代码
.image_row {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.image_row img:hover,
.image_row img:focus {
transform: translate(-9px, -9px);
box-shadow: 10px 10px #95e1d3;
}<div class="image_row">
<img src="image-1" height="250" width="380" />
<img src="image-2" height="250" width="380" />
<img src="image-3" height="250" width="380" />
</div>
我的问题是我不知道如何为图像制作渐变叠加。我尝试了以下代码，但它没有带来任何效果：
.image_row img:hover,
.image_row img:focus{
transform: translate(-9px, -9px);
box-shadow: 10px 10px #95e1d3;
background-image: -moz-linear-gradient( 90deg, rgb(252,227,138) 0%, rgb(243,129,129) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb(252,227,138) 0%, rgb(243,129,129) 100%);
background-image: -ms-linear-gradient( 90deg, rgb(252,227,138) 0%, rgb(243,129,129) 100%);
mix-blend-mode: normal;
opacity: 0.9;
}回答 3
Stack Overflow用户
回答已采纳
发布于 2018-06-11 03:37:09
您可以使用CSS添加一个伪元素来覆盖图像，并在悬停/焦点上显示，这也具有渐变效果。
我将您的代码修改为以下示例：
.image_row {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.image_row img:hover,
.image_row img:focus {
transform: translate(-9px, -9px);
box-shadow: 10px 10px #95e1d3;
}
img {
display: block;
}
.image {
position: relative;
}
.image::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.image:hover,
.image:focus {
transform: translate(-9px, -9px);
box-shadow: 10px 10px #95e1d3;
}
.image:hover::before,
.image:focus::before {
background-image: -moz-linear-gradient( 90deg, rgb(252, 227, 138) 0%, rgb(243, 129, 129) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb(252, 227, 138) 0%, rgb(243, 129, 129) 100%);
background-image: -ms-linear-gradient( 90deg, rgb(252, 227, 138) 0%, rgb(243, 129, 129) 100%);
mix-blend-mode: overlay;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="image_row">
<div class="image">
<img src="http://via.placeholder.com/380x250" height="250" width="380" />
</div>
<div class="image">
<img src="http://via.placeholder.com/380x250" height="250" width="380" />
</div>
<div class="image">
<img src="http://via.placeholder.com/380x250" height="250" width="380" />
</div>
</div>
</body>
</html>
Stack Overflow用户
发布于 2018-06-11 03:42:02
我建议使用div而不是img标记。像这样的东西可能会对你有用：
.image_row {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.image_row div:hover,
.image_row div:focus {
transform: translate(-9px, -9px);
box-shadow: 10px 10px #95e1d3;
}
.overlay {
position: relative;
}
.overlay:after {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.overlay:hover:after {
opacity: .5;
}
.red_overlay:after {
background-image: -moz-linear-gradient( 90deg, rgb(252, 227, 138) 0%, rgb(243, 129, 129) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb(252, 227, 138) 0%, rgb(243, 129, 129) 100%);
background-image: -ms-linear-gradient( 90deg, rgb(252, 227, 138) 0%, rgb(243, 129, 129) 100%);
}
.box {
width: 380px;
height: 250px;
border: 1px solid grey;
display: inline-block;
vertical-align: top;
margin-top: 10px;
;
}<div class=image_row>
<div style="background-image:url(images/1.jpg)" height="250" width="380" class="box overlay red_overlay">
</div>
Stack Overflow用户
发布于 2020-11-30 13:24:41
是的，对于img标签，在父div上使用background:线性渐变，这对我很有效：
<
div class="home-hero-two-image">
<img src="./resources/images/homepage/mobile-header-img.jpg" />
</div>
.home-hero-two-image {
transform: scaleX(1);
}
.home-hero-two-image ::after {
position: absolute;
content: "";
z-index: 10;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: inline-block;
background: rgb(54, 62, 75);
background: linear-gradient(
0deg,
rgba(54, 62, 75, 0) 51%,
rgba(enter code here54, 62, 75, 0.8855917366946778) 100%
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50787210
复制相关文章
相似问题