我正在对这个页面部分进行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;
}
您可以使用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>我建议使用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>是的，对于 img 标签，请使用背景：父div 上的线性渐变，这对我有用：
<
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%
);
}