div半透明div半透明如何设置

本文目录一览：

• 1、设置一个DIV半透明，怎么才能使这个DIV中的其他DIV不半透明？
• 2、CSS如何定义DIV背景半透明颜色
• 3、为什么我div加上图片之后图片是半透明状态的，而且div的背景色怎么调成无色？
• 4、div设置背景半透明
• 5、如何设置div的透明度但是其中的文字不透明

设置一个DIV半透明，怎么才能使这个DIV中的其他DIV不半透明？

阿彩小姐你好～！

这种情况下，是不可能在这个DIV里面的DIV显示为不是半透明的。

div id="a"div id="b"/div/div

好像上面，div a设置为半透明后，div b也只能跟着。

解决方法只有修改结构：

div id="a"/div

div id="b"/div

把本来是a里面的东西拿出来，然后设置b“叠”在a上，使看上去b在a里面。

这种方法比较实际，而且比较好兼容性。

CSS如何定义DIV背景半透明颜色

“长城郭靖”回答的是错的，他答的是让整个元素半透明

只让背景半透明只有一个办法，就是用rgba颜色，代码如下

background: rgba(0, 0, 0, 0.5)

解释：这是黑色半透明的代码

　前三个值表示颜色的red,green,blue值

　最后一个表示alpha值，就是透明度值，不透明为1

　（支持IE8+以及所有现代浏览器）

还是不懂的话，可以参考 百度百科 “rgba”词条 和 “CSS 颜色值”词条

为什么我div加上图片之后图片是半透明状态的，而且div的背景色怎么调成无色？

不知道你background是怎么设置的，如果你同时设置了背景图片和背景色，那么你要把背景图片写在背景色前面，否则背景色会覆盖背景图片；简写的话就是：

background: url(图片) no-repeat #666;不简写的话就是先写background-image再background-color

如果不设置背景色的话，那么div默认是没有颜色的，你看到的背景色只是底层其他div的颜色而已，如果所有层都没设定颜色，那就是body默认自带的白色，也就是浏览器自带的白色；

至于你这里图片变为半透明，可能是你本身图片就被处理成了半透明效果，不会是背景色覆盖图片这个原因，因为背景色默认不会有透明度，要挡住的话就绝对看不到图片了；要不然就是你给div设置了半透明滤镜，造成div背景半透明效果并把背景图片覆盖了

我建议你半透明滤镜少用，因为兼容性不好，如果你想要背景色半透明，建议你还是用ps把有色图层处理成半透明效果后切成1*1px的图片做背景平铺，再在这个div内添加你所要的图片

div设置背景半透明

#a{

background:#FFCC33; 

filter:alpha(opacity=50);  /*支持 IE 浏览器*/

-moz-opacity:0.50; /*支持 FireFox 浏览器*/

opacity:0.50;  /*支持 Chrome, Opera, Safari 等浏览器*/

width: 300px;

height:300px;

}

还有一种仅让背景半透明，里面内容不会透明

#a{

background: rgba(255,204,51, 0.5);

width: 300px;

height:300px;

}

前三个值表示颜色的red,green,blue值

最后一个表示alpha值，就是透明度值，不透明为1

如何设置div的透明度但是其中的文字不透明

如何设置div的透明度但是其中的文字不透明:

设置div透明度的时候可能很多朋友会遇到这样一个问题，那就是对象中的文字也被产生了透明现象，也不能说事缺陷，也可能有时候需要这样的效果。这里就介绍一下如何将对象设置为透明效果，但是文字不透。代码实例如下:

!DOCTYPE html

html

head

meta charset=" utf-8"

meta name="author" content="" /

title蚂蚁部落/title

style type="text/CSS"

*{

margin:0px;

padding:0px;

}

.opacity{

width:150px;

height:150px;

background-color:green;

filter:alpha(opacity=50);

-moz-opacity:0.5;

opacity:0.5;

margin-left:20px;

margin-top:20px;

}

span{

display:block;

width:80px;

height:80px;

}

/style

/head

body

div class="opacity"

span蚂蚁部落/span

/div

/body

/html

上面的代码将第二个div设置为半透明，但是文字也出现了透明现象。那么这里改造一下代码:

!DOCTYPE html

html

head

meta charset=" utf-8"

meta name="author" content="" /

title蚂蚁部落/title

style type="text/css"

*{

margin:0px;

padding:0px;

}

.opacity{

width:150px;

height:150px;

background-color:green;

filter:alpha(opacity=50);

-moz-opacity:0.5;

opacity:0.5;

margin-left:20px;

margin-top:20px;

}

span{

display:block;

width:80px;

height:80px;

positiON:absolute;

top:20px;

left:20px;

}

/style

/head

body

div class="opacity"/div

span蚂蚁部落/span

/body

/html

以上代码实现了需要的效果。方法就是讲span元素从div取出来，使用绝对定位的方式，再将span元素定位到原来在div元素的位置。

div半透明的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于div半透明如何设置、div半透明的信息别忘了在本站进行查找喔。