css实现背景透明，文字不透明的两种方法

最新推荐文章于 2023-06-13 11:38:55 发布

专注前端技术开发3-5年

最新推荐文章于 2023-06-13 11:38:55 发布

阅读量1k

点赞数

分类专栏： HTML+CSS 文章标签：背景透明文字不透明

本文链接：https://blog.csdn.net/ManShowMan/article/details/44627733

版权

HTML+CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

兼容各浏览器且效果一致。

设置元素的透明度：
-moz-opacity:0.8; /*在Firefox中设置元素透明度
filter: alpha(opacity=80); /*ie使用滤镜设置透明

例如：

 <div><p>不透明</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的子元素，如下：

方法一：使用 rgba + Alpha Filter：

<div></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文字不透明*/

这样div的半透明效果也就不会影响到元素p了。最后在将p定位到需要的位置。

方法二：使用 opacity + Alpha Filter：

<style type="text/css">
*{margin:0 auto;}
body{background:url(006.jpg)}
.div{
filter:Alpha(opacity=40); background:#000;/*实现IE背景透明*/
-moz-opacity:0.4;/*支持3.5以下低的火狐背景透明*/
opacity:0.4;/*支持3.5以上火狐遨游，opera等背景透明*/
width:500px;
height:200px;
border:1px solid #FF0;
font-size:18px;
text-align:center;
font-weight:bold;
margin-top:120px;
}
p{position:relative;width:500px;height:200px;top:-200px;left:0;color:#FFF;}
</style>
<body>
<div class="div"></div>
<p>第一种：opacity + Alpha Filter：我是里面不透明的文字</p>
</body>

专注前端技术开发3-5年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css实现背景透明，文字不透明的两种方法

兼容各浏览器且效果一致。设置元素的透明度： -moz-opacity:0.8; /*在Firefox中设置元素透明度 filter: alpha(opacity=80); /*ie使用滤镜设置透明例如： <div><p>不透明</p></div> div{-moz-opacity:0.3;filter:alpha(opacity=30);background:#000;width:500p
复制链接

扫一扫

专栏目录