CSS 基础学习-178 当鼠标移动到图像时透明度为100％

由 hrs, 24 二月, 2022

当鼠标移动到图像时透明度为100％

实例代码：

<!doctype html>
<html>
    <head>
      <meta charset="utf-8">
      <style>
        img{
          width:200px;
          height:100;
          opacity:0.5;
        }
        img:hover{
          opacity:100%;
        }
        p.p2{
          color:red;
        }
      </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>
    <p class="p2">注意：这个实例是当鼠标移动到图像透明度为100％</p>
    </body>
</html>

运行效果：

css-178.png

标签

评论