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

【问题标题】：How do I add a image overlay through css?如何通过 css 添加图像叠加层？
【发布时间】：2015-09-18 03:10:26
【问题描述】：

我需要为我设置的 html 提供图像叠加层。以下是我的“更改个人资料照片”上传区域的代码。

-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" />

【问题讨论】：

对不起，“图像叠加”是什么意思？你需要悬停效果吗？
正确，我需要悬停效果。对不起！漫长的一天！

标签： html css hover overlay

【解决方案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;
}

【讨论】：