服务时间:8:30-18:00

首页 >web前端网

css如何设置透明度

发布时间:2022-12-11 19:48 字数:934字 阅读:191

css如何设置透明度?opacity设置整个元素的透明度,并且会被子元素继承。语法如下。


opacity: value (0-1);


IE8以及更早的版本支持替代的filter属性,属性值为0~100。例如,filter:alpha(opacity=50)。

opacity可以改变图片的透明度,利用这个特性可以完成图片的悬停效果。

【例】创建3张图片,并设置透明度为0.3,效果如图1所示。代码如下。


    <style>
      img{
         height:200px;
         opacity:0.3;
      }
   </style>
</head>
<body>
    <div class="page">
      <img src="/news/img/animal1.jpg" alt="" />
      <img src="/news/img/animal2.jpg" alt="" />
      <img src="/news/img/animal3.jpg" alt="" />
    </div>
</body>


半透明图片

图1 半透明图片

鼠标指针移到图片上时,将该图片的透明度设为不透明,完成图片的选定效果,如图2所示。代码如下。


img:hover{
   opacity:1;
 }


图片悬停

图2 图片悬停

【例2】建一个div元素,class名为box,背景色为黑色。在box的内部创建一个span元素,填入文字,文字颜色为红色,效果如图3所示。HTML代码如下。

黑底红字

图3 黑底红字


<style>
   .box{
      width:300px;
      height:100px;
      text-align:center;
      background-color:#000000;
   }
   .box span{
      color:red;
   }
</style>
<body>
    <div class="box">
      <span> 元素一定会从父级继承opacity属性值 </span>
    </div>
</body>


给box设置CSS样式,将透明度设置为0.1,效果如图4所示。可以看到box及其子级span元素中的文字都变为半透明状态,文字继承了box框的透明度属性值。代码如下。

添加透明度属性

图4 添加透明度属性


.box{
   width:300px;
   height:100px;
   text-align:center;
   background-color:#000000;
   opacity: 0.3;
}