Question

如何在不更改现有背景颜色的情况下指定background-color的不透明度？

例如，考虑：

＆＃13;

div {
  width: 100px;
  height: 100px;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

.light {
  background-color: rgba(?, ?, ?, 0.9) /* <--- what do I use here? */
}

＆＃13;

<div class="blue"></div>
<div class="green"></div>
<div class="blue light"></div>
<div class="green light"></div>

＆＃13;

我可以在div.light中提供更改不透明度而不覆盖/更改绿/蓝颜色的值？类似于background-alpha或background-opacity（不存在）

编辑：我根本不想更改div 内容的不透明度;只是背景。

编辑：我知道有一些涉及添加DOM的解决方案，但这违背了设计最佳实践（不使用DOM进行样式化），而且我的目标是仅使用CSS解决方案。

Answer 1

您可以使用伪元素作为背景，并使用opacity

div.blue::before {
  background-color: blue;
}

div.green::before {
  background-color: green;
}

div.light::before {
  background-color: rgba(?, ?, ?, 0.9)
}

div::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
}

div {
  position: relative;
}

.light::before {
  opacity: .5;
}

<div class="blue">blue</div>
<div class="green">green</div>
<div class="blue light">blue light</div>
<div class="green light">green light</div>

Answer 2

我认为它不存在，但您可以使用div的完整大小div.background和带文本，图片等的div.content并添加opacity to div.background

指定背景不透明度而不指定颜色

2 个答案: