css透明度的设置在网页的规划中是经常需求用到的,有时为了规划出的网页更加的漂亮,会对图片进行透明化处理,这样网页上面的内容就不会看不见,有的网页由于图片作为布景,也会更加漂亮,那么,css中的透明度怎样设置呢?今天这篇文章就来给咱们分享css中图片透明度的设置方法。
下面咱们就用这两个特点来分别设置图片透明度的效果。
首先咱们来看css中opacity特点设置图片透明度的例子
css:
.opacity1,.opacity2,.opacity_img{display:inline-block;}
.opacity1{filter:Alpha(opacity=0);}
.opacity2{filter:Alpha(opacity=50);}
.opacity_img{filter:Alpha(opacity=100);}
:root.opacity1{opacity:0;filter:none;}
:root.opacity2{opacity:.5;filter:none;}
:root.opacity_img{opacity:1;filter:none;}
html:

css

htmlcss颜色透明度怎么设置

opacity特点可以用来设置元素背景的通明度;它需要0~1之间的值。
0表明彻底通明(opacity:0);
1表明彻底不通明(opacity:1);
0.5表明半通明(opacity:0.5);
语法:
1
opacity:value|inherit;
特点值:
value指定不通明度。从0.0(彻底通明)到1.0(彻底不通明)
inheritOpacity特点的值应该从父元素承继
代码示例:
opactity
.box1{
position:relative;
width:200px;height:200px;
background-color:#00f;
z-index:10;
opacity:0.5;
}
.box2{
position:absolute;
top:80px;
left:80px;
width:200px;
height:200px;
background-color:#0f0;
z-index:5;
opacity:0.5;
}
.box3{
position:relative;
width:200px;
height:200px;
background-color:#f00;
z-index:1;
opacity:0.5;
}

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注