如何使用 css 更改顶部图像层的不透明度？

Question

我的图像有两种状态：黑白正常状态和彩色悬停状态，在 photoshop 中我制作了 2 层：背景层和顶层，我希望背景层显示为正常状态，悬停时显示顶层。有没有办法将不透明度 CSS 选项仅应用于顶层？这样我就可以在正常状态下将其设置为 0，在悬停状态下设置为 1？或者我需要制作 2 张图片并在悬停时显示第二张而不是第一张？

我试过保存图层的 tiff 扩展，但是当将不透明度更改为 0 时，图像变暗，这意味着不透明度应用于所有图层。

Answer 1

您可以在不使用两张图片的情况下完成此操作。而是使用 CSS 滤镜将第一张图像设为黑白。

img {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

img:hover {
  -webkit-filter: none;
  filter: none;
  transition: 0.66s
}

<img src="https://www.w3schools.com/howto/pineapple.jpg" alt="Pineapple" width="300" height="300">

Answer 2

我用 JavaScript 找到了这个解决方案：正常状态文件：1.png 悬停状态文件：1.png.png

<img id="my-img" alt="" src="1.png"
onmouseover="hover(this);" onmouseout="unhover(this);" />
<script>
function hover(element) {
element.setAttribute('alt', element.src );
element.setAttribute('src', element.src  +'.png');
}

function unhover(element) {
element.setAttribute('src', element.alt);
}
</script>

如何使用 css 更改顶部图像层的不透明度？

how to change the opacity of the top image layer with css?

css

photoshop

layer

opacity