使用颜色文字名称（例如“ red”）设置CSS颜色，还设置不透明度？

Question

是否可以使用颜色文本名称设置 CSS 颜色并设置不透明度？

类似的东西：

color: lightgray alpha 0.5

还是我必须使用RGBalpha，例如：

color: rgba(211,211,211,0.3)

Answer 1

据MDN documentation on this告诉我们，如果要选择带有alpha的颜色，则应该使用rgba(r,g,b,a)甚至是hsla(h,s,l,a)。因此，无法使用您展示的第一种方式来完成您想要达到的目标。

Answer 2

不可能将彩色文本名称和字母组合在一起。

---

您可以通过两种方式处理问题

建议：将彩色文本名称翻译为rgb，以便lightgray = 211,211,211

span.lightgray {
   color: rgba(211,211,211, 0.3); // Your own suggestion
}

不建议使用：使用彩色文本名称和不透明度，但是不透明度适用于整个元素（因此背景或其他属性也将是透明/受影响的）

span.lightgray{
   color: lightgray;
   opacity: 0.3; // Not advised
}

Answer 3

您可以使用opacity。

但这会同时影响background-color和color。

#txt {
  color: red;
  background-color: lime;
  opacity: 0.5;
}

<span id="txt">TEST</span>

Answer 4

您可以使用RGBalpha或HSL或HSLA。

例如： 1）RGBA： rgba（255，0，0，0.2）; 红色255 gree-0 蓝色-0 aplha（不透明或透明）-0.2

2）HSL： hsl（120，100％，50％） 色相是方向盘上的颜色度-120。 饱和度-100％ 亮度-50％

https://www.w3schools.com/css/css3_colors.asp

我们还可以使用

这样的opacity属性

div {
  opacity: 0.5;
}

但是opacity属性会增加背景的透明度。因此所有子元素都将变为透明。因此，可能很难阅读。因此最好使用HSL或RGBA