css不透明度不影响文字

CSS中的不透明度常常用来调整背景色或图片的可见度。这个属性可以通过opacity或rgba颜色值来实现。但是，我们发现如果在有背景色或背景图片的元素中使用不透明度可能会影响文字的可读性。

/* 不透明度为0.5 */
background-color: rgba(0, 0, 0, 0.5);
/* 不透明度为0.5 */
opacity: 0.5; 

当我们使用上述代码给元素的背景色或不透明度添加半透明效果时，文字也会受到影响。在这种情况下，我们需要一种方法来使文字不受不透明度的影响。

这时候，我们可以使用CSS属性——rgba()。我们可以设置背景色或者图片的不透明度，而不影响所有子元素内的文本。因为rgba()函数用的是4个参数，可以设置背景颜色，可见度，[红，绿，蓝]的值，但不会影响其他元素中的文本。

/* 背景颜色为红色，不透明度为0.5 */
background-color: rgba(255, 0, 0, 0.5); 

相比于opacity属性，我们可以看到rgba函数只改变了背景颜色的透明度，而不是整个元素，并且不影响子元素。所以当我们需要给元素添加背景半透明效果时，我们可以最好使用rgba()函数，以保证文本可读性。