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

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

当鼠标移动到图像时透明度为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

标签