如何用css改变顶部图像层的不透明度？答案

【问题标题】：how to change the opacity of the top image layer with css?如何用css改变顶部图像层的不透明度？
【发布时间】：2020-12-09 08:02:09
【问题描述】：

我有一个具有 2 种状态的图像：黑白的正常状态和颜色的悬停状态，在 Photoshop 中我制作了 2 层：背景层和顶层，我希望背景层显示为正常状态和悬停时显示顶层。有没有办法将 opacity CSS 选项仅应用于顶层？所以我可以让它在正常状态下为0，在悬停状态下为1？或者我需要制作 2 张图像并在悬停时显示第二张而不是第一张？

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

【问题讨论】：

标签： css opacity photoshop layer

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

&lt;img src="https://www.w3schools.com/howto/pineapple.jpg" alt="Pineapple" width="300" height="300"&gt;

【讨论】：

非常感谢，我试过了，效果很好，但它只是灰度，我需要一个纯黑白图像
非常感谢。我已经接受了，我希望找到另一个更好的解决方案。

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

【讨论】：