我试图在图像标签上添加线性渐变，但它不起作用。我该怎么做？
#Hero-Image-Div {
width: 100%;
height: 37rem;
background-color: #0072b1;
position: absolute;
top: 7.1rem;
left: 0rem;
}
#Hero-Image {
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("photographer.jpg");
}<div id="Hero-Image-Div">
<img id="Hero-Image" src="Homepage-Hero-Image.jpg" alt="">
</div>在包装器(#Hero_Image-Div(中包装图像元素。然后开始创建具有伪元素：：before：：after的覆盖。记住，职位很重要。
#Hero-Image-Div {
/* THIS */
position: relative;
width: 100%;
height: 37rem;
background-color: #0072b1;
/* position: absolute;
top: 7.1rem;
left: 0rem; */
}
/* THIS */
#Hero-Image-Div::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}
#Hero-Image {
width: 100%;
height: 100%;
}<div id="Hero-Image-Div">
<img id="Hero-Image" src="https://picsum.photos/200/300" alt="">
</div>我在这里提到了我的解决方案。只需将我的图像路径替换为您的。并通知我它是否在你这边工作。
--------------------------HTML文件-----------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Overlay Effect</title>
<!-- styles -->
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div class="folder-img">
<h1>i'm folder image</h1>
</div>
</body>
</html>
--------------------------CSS文件-----------------------
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* way 1 */
div {
min-height: 100vh;
color: white;
border: 2px solid red;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
text-transform: uppercase;
text-align: center;
}
.folder-img {
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.3),
rgba(255, 100, 239, 0.5)
),
url("./big.jpeg") center/cover fixed no-repeat;
}