css背景图片设置透明度(css设置背景图片的透明度)
css里怎么给背景图片变透明点 给图片的div加什么代码才能实现呢
1、新建html文档,在body标签中添加一个img标签,这时默认情况下图片是不透明的:
2、在head标签中添加style标签,在style标签中为img标签设置透明度样式,其中三个属性是为了兼容不同浏览器:
3、刷新浏览器中的页面,这时可以发现浏览器中图片的透明度改变了,透明度的范围是0-1,0表示完全透明,1表示不透明:
css怎么调背景图片透明度
说明一下,
背景图片是调整不了透明度的,你只能调整容器的透明度来实现容器内的背景,内容也出现透明度。
style
#box{
width:200px;
height:200px;
background:url(背景路径);
opacity:0.5;
filter:"alpha(opacity=50)";
-ms-filter:"alpha(opacity=50)"; /* 旧版IE */
}
/style
div id=box/div
背景图片的透明度如何设置(CSS)
可以设置啊,如图:
常见的失败做法
最常见的做法事设置元素的opacity,这种设置出来的效果就是内容与背景都事半透明的,严重影响视觉效果。
还有就是设置background-color:rgba(),这种方式只能设置背景颜色的透明度。
正确Action:
!DOCTYPE html?html lang="en"?head????meta charset="UTF-8"????title登陆/title????style type="text/css"????????body{????????????background-image:url(images/bird.jpg);????????????background-repeat: no-repeat;????????????background-size:100%;????????}????????.login_box::before{????????????content:"";????????????/*-webkit-filter: opacity(50%);?????????????filter: opacity(50%); */????????????background-image:url(images/love.jpg);????????????opacity:0.5;//透明度设置????????????z-index:-1;????????????background-size:500px 300px;????????????width:500px;????????????height:300px;????????????position:absolute;????????????//一定要设置position:absolute,这样才能设置z-index,让背景处于内容的下一层????????????top:0px;????????????left:0px;????????????border-radius:40px;????????}????????.login_box{????????????position:fixed;????????????left:50%;????????????top:200px;????????????width:500px;????????????height:300px;????????????margin-left:-250px;????????????border-radius:40px;????????????box-shadow: 10px 10px 5px #888;????????????border:1px solid #666;?????????????text-align:center;????????}????????form{????????????display:inline-block;????????????margin-top:100px;????????}????????input{????????????display:block;????????????width:250px;????????????height:30px;????????????background-color: #888;????????????border:1px solid #fee;????????????outline:none;????????????border-radius:10px;????????}????????input[type="submit"]{????????????width:100px;????????????height:30x;????????????margin-left: 70px;????????????background-color: #ccc;????????}????????span{????????????color:red;????????????font-size:15px;????????}????/style?/head?body????div class="login_box" ... ...