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

hrs 提交于 2022/02/24 - 08:19 , 周四

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

标签