Question

在CSS中，我可以使用opacity属性设置fg / bg不透明度。但我无法在不使用rgba()的情况下看到如何更改背景不透明度。

这很烦人，因为我无法使用具有不透明度的颜色名称。

示例：

＆＃13;

<p style="background-color: red;">1: This is full opacity red<p>
<p style="background-color: red; opacity: 0.5">2: This is half opacity red<p>
<p style="background-color: rgba(255, 0, 0, 1);">3: This is full opacity red with rgba()<p>
<p style="background-color: rgba(255, 0, 0, 0.5);">4: This is full opacity red with rgba()<p>
<p style="background-color: red; background-opacity: 0.5">5: I'd like this to LOOK like #4, but it doesn't (because background-opacity is not real CSS)<p>

＆＃13;

我喜欢使用像示例＃5那样的CSS，但让它像示例＃4一样工作。

Answer 1

我不知道如何在不使用rgba()的情况下更改背景不透明度。

正如评论中所指出的，你总是可以使用CSS预处理器来处理这个问题。

例如，LESS's fade() color函数将获取颜色对象和百分比，并将值转换为可用的rgba颜色：

p { background-color: fade(red, 50%); }

以上将编译为：

p { background-color: rgba(255, 0, 0, 0.5); }

我喜欢使用CSS，例如示例＃5，但是让它像示例＃4一样工作。

可能的解决方法：

由于您目前无法使用CSS转换颜色，因此一种解决方法是在:before伪元素上设置背景颜色。在这样做时，您仍然可以利用opacity属性来调整整个元素的不透明度，而不会影响其他元素和内容。

.background-opacity {
  position: relative;
}
.background-opacity:before {
  content: '';
  background-color: red;
  opacity: 0.5;
  position: absolute;
  top: 0; left: 0;
  bottom: 0; right: 0;
  z-index: -1;
}

<p class="background-opacity">'background-color: red' / 'opacity: 0.5' on the ':before' pseduo element.<p>

Answer 2

不幸的是，我非常确定设置背景颜色不透明度只能使用rgba。不透明度＆＃39;设置会改变整个div的不透明度，并且您已经发现了背景不透明度＆＃39;不是一件事。你可以尝试使用sass或jquery来避免丢失指定的颜色，但这对于非常简单的事情来说真的只是很多开销。

tl; dr只需使用rgba并放弃字符串颜色名称

如何更改CSS中的背景不透明度？

2 个答案:

可能的解决方法：