div半透明 用css实现div的黑色透明
朋友们，div半透明和用css实现div的黑色透明是当今热门话题，但是它们的内涵和影响力可能会让人感到困惑。在本篇文章中，我将为你们揭示它们的本质和重要性，希望能够为你们带来新的认识。
如何设置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元素的位置。
用css实现div的黑色透明
现在比较稳妥的做法是做一个半透明的黑色PNG图片，然后把它作为背景，因为单纯用CSS来写，在IE8及以下版本里面是不生效的。当然如果一定要用CSS来实现的话，也容易，可以直接设置这个元素的透明度，例如下面这样：
background:#000; opacity: 0.8;
也可以直接设置背景色为透明色，例如：
background:rgba(0,0,0,0.8);
这也是楼上的方法，相对而言这个方法还是比较简洁的，只是会遇到一点点浏览器兼容的问题罢了。
如何将div设置为透明
1、先引入对应的脚本文件。
2、在html里，我们创建一个div，div里面包含一个子div和一个p元素。后面还有一个按钮，用来触发删除操作的。
3、通过id找到div，然后调用html()方法，并把空字符串传进去，就可以清空div里的内容了。
4、运行页面，可以看到现在div里有一个子div和一个p段落。我们点击删除按钮。
5、点击后，可以看到现在div里的内容全部被删除了。
6、让div有透明度而不影响内容，不能使用opacity:0.5，因为它会让内容也透明化；不影响内容要使用。
7、background:rgba()，rgba分别代表的是红色、绿色、蓝色和透明度（括号内的值分别对应），例如background:rgba(255,00,255,0.5)。
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)来设置背景颜色透明。
非常感谢您的阅读！我们希望本文对于解决您关于div半透明的问题提供了一些有价值的信息。如果您还有其他疑问，我们将很乐意为您提供进一步的帮助。