css中把背景颜色弄成半透明

CSS中可以通过设置opacity属性来实现背景颜色半透明的效果，但是这种方法会同时影响元素的内容和背景。

 .opacity{
        background-color: rgba(255,255,255,0.5);
        /*rgba中的最后一个参数0.5代表透明度为50%*/
    } 

如果只想要背景颜色半透明，而不影响元素内容的透明度，需要使用伪元素和绝对定位来实现。

 .half-opacity{
        position: relative;
    }
    .half-opacity::before{
        content: "";
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        background-color: rgba(255,255,255,0.5);
        z-index: -1; /*伪元素要在原来元素下面，需要设置z-index*/
    } 

以上代码中，.half-opacity 是需要设置背景半透明的元素的类名。通过设置position为relative，然后使用伪元素 ::before 和 absolute 相对于该元素定位。在伪元素中设置背景颜色，并使其占据整个元素位置，再设置z-index为负值使伪元素在原元素下面。

这样设置后，就可以通过调整 rgba 中的最后一个参数来控制背景颜色的透明度，同时保留元素的内容不受影响。