如何仅将opacity设置为背景

Question

我在这里有一个问题，我正在尝试使用HTML5选择元素，我需要将此元素设置为透明，但是一旦我设置了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％不透明，数字越大，透明度越低）

Answer 2

您可以使用rgba ()

设置背景颜色

select {
    background-color: rgba(128, 128, 128, .4);
    border: 2px solid get-color(golden-poppy);
    border-top: 0;
    color: get-color(night);
}