css让背景变透明,css修改背景透明度
在css中怎样让文字的背景色透明
设置元素的透明度：
-moz-opacity:0.8; /*在Firefox中设置元素透明度
filter: alpha(opacity=80); /*ie使用滤镜设置透明
但是当我们对一个标签设置背景的透明度时，往往我们并不希望该标签上的文字图片也变成半透明了。
例如：
divp不透明/p/div
div{-moz-opacity:0.3;filter:alpha(opacity=30);background:#000;width:500px;
height:500px;color:#F30; font-size:32px; font-weight:bold; }
可以很明显的看出文字也被半透明的，这是我们不想看到的效果。
以前我曾经是绝对定位的方法解决这个问题，也就是现在的p并不是div的子元素。
div/div
p不透明/p
这样div的半透明效果也就不会影响到元素p了。最后在将p定位到需要的位置。
但是很多时候这样的标签并不是很合理，有可能还会多浪费几个标签。
下面的这种方法就可以解决上面的问题了：
div{background:rgba(0,0,0,0.2) none repeat scroll !important; /*实现FF背景透明，文字不透明*/
background:#000; filter:Alpha(opacity=20);/*实现IE背景透明*/
width:500px; height:500px; color:#F30; font-size:32px; font-weight:bold;}
div p{ position:relative;}/*实现IE文字不透明*/
css里怎么给背景图片变透明点 给图片的div加什么代码才能实现呢
1、新建html文档，在body标签中添加一个img标签，这时默认情况下图片是不透明的：
2、在head标签中添加style标签，在style标签中为img标签设置透明度样式，其中三个属性是为了兼容不同浏览器：
3、刷新浏览器中的页面，这时可以发现浏览器中图片的透明度改变了，透明度的范围是0-1，0表示完全透明，1表示不透明：
css设置背景半透明
首先，用大家比较熟悉的CSS属性opacity来改变div的背景颜色。
描述：
外面大的div背景颜色为黄色，里面小的div的背景颜色为红色，现在我们需要设置大的div的背景颜色变成半透明状态，我们将opacity的属性值设为0.5，代码如下：
HTML部分：
1
2
3
我是内容
CSS部分：
1
2
3
4
5
6
7
8
9
10
11
.aa{
width: 250px;
height: 250px;
background: yellow;
opacity: 0.5;
}
.bb{
width: 150px;
height: 150px;
background: red;
}
背景颜色的确变成了半透明，但是里面小div的背景以及文字都变成半透明了，这可能不是我们想要的效果，所以我们一般不使用这种方法。当然了，如果在页面布局时，你希望div里面所有的都变透明，就用opacity。
接下来我们用另一种方法，background-color:rgba(0,0,0,0~1)，使用这个方法就只会设置div背景透明，而不会影响到div里的内容。
HTM部分一样，只需要将opacity换成rgba即可。
代码如下：
1
2
3
4
5
6
7
8
9
10
.aa{
width: 250px;
height: 250px;
background-color: rgba(255,255,0,0.5);
}
.bb{
width: 150px;
height: 150px;
background: red;
}
大的div透明度改变以后，对里面的背景和文字都没有任何影响。所以我们一般用background-color:rgba(0,0,0,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" ... ...
css中，如何设置前景色的透明度？
1、准备好初始化的代码
html
head
meta charset="utf-8"/
style
/style
/head
body
div/div
/body
/html
2、初始化样式
div{
border:1px red solid;
width:800px;
height:800px;
background-color:blue;
}
3、运行结果为
4、设置背景颜色半透明的样式代码background-color:rgba(0,0,255,0.5);
5、运行结果为
透明原理：把背景颜色设置为rgb的方式，然后再加一个透明度就可以设置为半透明了。
注意：设置背景颜色时哪里应该写成rgba。