css背景图片设置透明度(css设置背景图片的透明度)

http://www.itjxue.com  2023-01-30 02:40  来源:未知  点击次数: 

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" ... ...

(责任编辑:IT教学网)

更多

推荐软件水平考试文章