如何通过 css 添加图像叠加层？

Question

我需要为我设置的 html 添加图像。下面是我在 "change a profile photo" 上传区的代码。

-icon_camera_128.png是需要悬停效果的图片

-img class="cameraUpoad 是默认的头像。

有人可以帮我吗？

谢谢

<label for="fileUploadLink" class="custom-file-upload">
 <div class="changeProfile">
  <img src="../img/elements/icon_camera_128.png">
   <img class="cameraUpload" style="width: 128px; height: 128px;" src="data:image/png;base64, <?= preg_replace("/\"/", "\\"", base64_encode($user['avatar'])) ?>" alt="avatar">
    <input id="fileUploadLink" type="file" class="filestyle" name="imageUpload" />

Answer 1

您可以在调整悬停图像 opacity 的同时给图像换行 position: relative; 和两个图像（常规状态和悬停状态）position: absolute;：

JS Fiddle

类似于：

.changeProfile {
    position: relative;
}
img {
    position: absolute;
    height: 300px;
    width: 300px;
}
.cameraUpload {
    opacity: 0;
    transition: .4s;
    z-index: 999;
}
.cameraUpload:hover {
    opacity: 1;
}

如何通过 css 添加图像叠加层？

How do I add a image overlay through css?

html

css

overlay

hover