如何用CSS实现背景透明，文字不透明（兼容各大浏览器）

最新推荐文章于 2017-01-25 18:02:20 发布

顛沛流離的小時光

最新推荐文章于 2017-01-25 18:02:20 发布

阅读量784

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/IT_Queen/article/details/52223292

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

很多时候，我们需要背景有一定的透明度，可是当我们给背景元素加了半透明属性opacity后，会发现，其中的文字也跟着相同程度的透明了。可是，这不是我们想要的结果。我们想要的是背景半透明，文字不透明。于是乎，头脑动起来，想办法解决呀。

嗯，直接上代码吧。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景透明，文字不透明</title>
<style>
*{
    padding: 0;
    margin: 0;
}

body{
  padding: 50px;
  background-color: #fff;
}

.demo{
  width: 750px;
  height: 562px;
  padding-top: 50px;
  background: url("bg.jpg") no-repeat;
}

.bg{
  width: 100%;
  height: 50px;
  background-color: rgba(135, 133, 156, 0.57) !important;/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
  filter:Alpha(opacity=57);
  background-color:#87859c; /* 使用IE专属滤镜实现IE背景透明 */
}
.bg p{
  position: relative; /* 实现IE文字不透明 */
  color: #FFFFFF;
  line-height: 50px;
  text-align: center;
}
</style>
</head>
<body>
    <div class="demo">  <!-- 此处为了突出运行结果，特意加了一个背景图片 -->  
        <div class="bg">
            <p>背景透明，文字不透明</p>
        </div>
    </div>
</body>
</html>

运行效果截图：

背景透明，文字不透明

顛沛流離的小時光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何用CSS实现背景透明，文字不透明（兼容各大浏览器）

很多时候，我们需要背景有一定的透明度，可是当我们给背景元素加了半透明属性opacity后，会发现，其中的文字也跟着相同程度的透明了。可是，这不是我们想要的结果。我们想要的是背景半透明，文字不透明。
复制链接

扫一扫