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

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

原创最新推荐文章于 2023-06-13 11:38:55 发布 · 939 阅读

1 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使网页背景呈现半透明效果而保持文字完全可见的方法。通过CSS设置背景颜色的透明度，并利用相对定位确保文字不透明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

很多时候，我们需要背景有一定的透明度，可是当我们给背景元素加了半透明属性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>

运行效果截图：

背景透明，文字不透明