CSS 基础学习-177 使用鼠标移动来改变图像的不透明度

由 hrs, 24 二月, 2022

opacity 属性常与:hover选择器一起使用，改变鼠标悬停时的不透明度：

实例代码：

<!doctype html>
<html>
    <head>
      <meta charset="utf-8">
      <style>
        img{
          width:200px;
          height:100;
        }
        img:hover{
          opacity:50%;
        }
      </style>
    </head>
    <body>
      <h1>图像透明度</h1>
      <p>opacity 属性常与:hover选择器一起使用，改变鼠标悬停时的不透明度：</p>
      <img src="img/flower01.jpeg"></img>
      <img src="img/flower02.jpeg"></img>
      <img src="img/flower03.jpeg"></img>
    </body>
</html>

运行效果：

css-177.png

标签

评论