本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。
在css中,可以使用opacity属性设置图片的透明度,语法“opacity:数值”,其中数值范围在“0.0-1.0”之间;当数值为1时表示完全不透明,当数值为0.5时表示半透明,当数值为0时表示完全透明。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
图片透明度设置
1 | .opacity img{opacity: 0.5;}
|
代码和效果图片如下。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >Document</ title >
< style >
body {
background:url(../images/bg.jpg) no-repeat;
}
.opacitybox{
width: 400px;
height: 200px;
margin:0 auto;
margin-top:320px;
}
.opacity img{
opacity: 0.5;
}
</ style >
</ head >
< body >
< div class = "opacitybox opacity" >
< img src = "../images/img.jpg" alt = "" width = "100%" >
</ div >
</ body >
</ html >
|
推荐学习:css视频教程
以上就是css如何设置图片透明度的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css transition-property属性怎么用
css 层叠是什么
了解css的选择器优先级和!important权重
@keyframes是什么
css如何去掉图片边框
css max-height属性怎么用
css中什么是内联元素
如何解决css英文不自动换行的问题
css如何实现波浪效果
jsp如何引入css
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css如何设置图片透明度