Question

我需要为我设置的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" />

Answer 1

在调整悬停图像的position: relative;时，您可以将图像包裹为position: absolute;和两个图像（常规状态和悬停状态）opacity：

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添加图像叠加？

1 个答案: