介绍。opacity1 .opacity2 .opacity_img{显示:inline-block;}
.opacity1{过滤器:α(不透明度=0);}
.opacity2{过滤器:α(不透明度=50);}
.opacity_img{过滤器:α(不透明度=100);}
:根.opacity1{不透明度:0;过滤器:没有;}
不透明度:根.opacity2 {: 5;过滤器:没有;}
:根.opacity_img{不透明度:1;过滤器:没有;html:} & lt; p>
& lt; a href=https://www.yisu.com/zixun/?”class=" opacity2 ">
& lt; div类=癲emo2-bg"比;
& lt; div类=癲emo2"祝辞背景图半透明、文字不透明& lt; br/祝辞方法:定位+背景:rgba (255255255, 0.3) & lt;/div>
& lt;/div> css: .demo2-bg {
背景:url (//image.zhangxinxu.com/image/study/s/s256/mm1.jpg)不再重演;
background-size:封面;
宽度:500 px;
身高:300 px;
位置:相对;
}
.demo2 {
位置:绝对的;
左:0;
右:0;
上图:0;
底部:0;
宽度:500 px;
身高:300 px;
行高:50 px;
text-align:中心;
背景:rgba (255255255, 0.3); & lt; div类=癲emo1"在背景图半透明、文字不透明& lt; br/祝辞方法:背景图+过滤:blur
这篇文章主要介绍设置css图片透明度的方法有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
css中与设置透明效果相关的属性有两个:透明度和rgba。
下面我们就用这两个属性来分别设置图片透明度的效果。
首先我们来看css中透明度属性设置图片透明度的例子css:
效果如下:
注意:目前主流的浏览器都支持不透明度:写价值法,价值取值为0 - 1,0为完全透明,1为完全不透明。但是在IE8及之前的版本中是不支持这种写法,那么我们可以通过滤镜来解决 过滤器:α(不透明度=价值),价值取值为0 - 100,0为完全透明,100年为完全不透明。就像上面例子那样。
我们再来看看css中rgba设置图片透明的例子:html:
效果如下:
说明:此方法浏览器兼容性好,图片和内容都能很好分离实现背景图片半透明效果,而文字,边框等样式与内容不受影响。只是多了一层div,使用绝对定位样式来实现重叠层叠。
设置背景颜色值与透明度。前3个255为代表RGB黑色,0.3代表透明度为30% .
最后,我们再来看一个图片毛玻璃效果的设置方法:
效果如下:
以上是设置css图片透明度的方法有哪些的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
