如何不使用Opacity属性为Div设置透明背景色

嘿，这个问题问得很实用！想实现背景透明但又不丢失内容的原始颜色，还不能用opacity属性或rgba()函数？别担心，咱们有两个靠谱的方法可以搞定：

方法1：用伪元素创建独立背景层 #

这种方法的核心思路是把背景效果单独放在伪元素里，让伪元素作为容器的“背景板”，容器内的内容则完全独立于这个背景层，这样给伪元素设置透明效果时，内容的颜色丝毫不受影响。

代码示例 #

<div class="transparent-box">
  <h3>我是原始颜色的标题</h3>
  <p>背景已经透明啦，但我的颜色完全没变～</p>
</div>

.transparent-box {
  position: relative;
  width: 220px;
  height: 220px;
  padding: 20px;
  /* 确保内容在伪元素上方 */
  z-index: 1;
  color: #2d3748; /* 设置内容的原始颜色 */
}

.transparent-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 设置原始背景色 */
  background-color: #dd3355;
  /* 用filter实现透明效果，不会影响内容 */
  filter: opacity(0.4);
  /* 把伪元素放到内容下方当背景 */
  z-index: -1;
}

效果说明 #

伪元素单独承担了背景的透明效果，容器内的文字、图标等内容完全处在独立的层级，所以它们的原始颜色能完整保留，不会像用opacity那样连内容一起变透明。

方法2：利用background-blend-mode实现混合透明 #

如果你的背景是纯色，还可以通过background-blend-mode让原始背景色和另一种颜色混合，模拟出透明的效果，同时内容颜色不受任何影响。

代码示例 #

<div class="blend-box">
  <h3>我也是原始颜色哦</h3>
  <p>背景是混合出来的透明感～</p>
</div>

.blend-box {
  width: 220px;
  height: 220px;
  padding: 20px;
  color: #2d3748; /* 内容原始颜色 */
  /* 原始背景色 + 白色背景层 */
  background-color: #dd3355;
  background-image: linear-gradient(#ffffff, #ffffff);
  /* 通过混合模式实现透明效果 */
  background-blend-mode: overlay;
  background-size: 100% 100%;
}

效果说明 #

通过background-blend-mode: overlay让白色和原始红色背景混合，最终呈现出类似半透明的视觉效果，而内容的颜色始终保持原始状态，完全不受背景混合的影响。

内容的提问来源于stack exchange，提问作者oguzhancerit