css3 opacity属性设置透明度

原创 国哥笔记  2019-03-04 16:30  阅读 365 views 次

opacity属性定义及用法

在css中,opacity属性是使用来设置元素的不透明级别,是css3中新增属性,目前所有浏览器都已经支持了该属性,IE8以及更早的版本支持替代的filter属性(如:filter:Alpha(opacity=50))。

opacity属性语法格式

  1. css语法:opacity: value/inherit;
  2. JavaScript语法:object.style.opacity=0.5;

属性值说明

  • value:规定不透明度,从0.0(完全透明)到1.0(完全不透明);
  • inherit:从父元素继承opacity属性的值;

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 opacity属性设置透明度</title>
<style type="text/css">
div{width:400px;height: 60px;background:red;border:1px solid #000;}
#div1{opacity:0.2;}
#div2{opacity:0.5;}
#div3{opacity:1.0;}
</style>
</head>
<body>
<div id="div1">opacity:0.2;</div>
<div id="div2">opacity:0.5;</div>
<div id="div3">opacity:1.0;</div>
</body>
</html>

运行结果:

css3 opacity属性设置透明度

 

更多css属性——>css属性大全

本文地址:https://www.ggbiji.com/css-opacity.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情