html - 如何仅设置背景不透明度

Question

这个问题已经有答案了:

How do I reduce the opacity of an element's background using CSS? (29 个回答)

已关闭 8 年前。

我这里有一个问题，我正在尝试使用 HTML5 select 元素，我需要将此元素设置为透明，但是一旦我设置了 opacity 属性，select 元素的字母/内容就会变得透明，就像这个

所以我需要的只是将该元素的背景设置为透明，有没有办法做到这一点，或者我需要将元素的背景颜色设置为与该图片背景相同的蓝色？

  select {
    background-color: get-color(nieve);
    border: 2px solid get-color(golden-poppy);
    border-top: 0;
    color: get-color(night);
    opacity: 0.4;
  }

Answer 1

您可以使用rgba()指定背景颜色

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

前三个值是 RGB 级别，最后一个是不透明度(本例中为 50% 不透明，数字越大透明度越低)