时间戳

首页 > 解决方案 > 如何更改单个图像的不透明度

html - 如何更改单个图像的不透明度

问题描述

我编写了如下 css 来减少网页上图像的不透明度：

img {
    opacity: 1; 
    -webkit-transition: .5s;
       -moz-transition: .5s;
        -ms-transition: .5s;
         -o-transition: .5s;
            transition: .5s;
}

img:hover {
    opacity: 0.6;
}

我的问题是如何减少 html 中单个图像而不是页面上所有图像的鼠标悬停不透明度？

我已经尝试过#image-id:hover {}了.image-class，这些使图像消失了。

编辑：

这是两张图片：

<center>
    <img src="Online video editor.png" alt="Online video editor" class= "upload-file-image" id= "upload-file-image"height="200" width="300" style="opacity: 1;">
</center>

<center>
    <img src="jason-strull-KQ0C6WtEGlo-unsplash.jpg" alt="Online video editor page background" class= "page-background-image">
</center>

我希望保持src="jason-strull-KQ0C6WtEGlo-unsplash.jpg"不透明并更改src="Online video editor.png"鼠标悬停时的不透明度。

对不起，如果我有点困惑，这是我的第一篇文章:)

标签： htmlcss

解决方案

问题是您的第一个img标签具有内联样式 -style="opacity: 1;"

删除它，你应该很高兴，因为你已经在 css 中设置了不透明度！

演示：https ://codepen.io/j_watson89/pen/oNxWEBp

推荐阅读