/* 添加背景色透明度 */ .background { background-color: rgba(0, 0, 0, 0.5); /* 最后一个参数0~1之间,值越小越透明 */ } /* 添加字体颜色透明度 */ .font { color: rgba(255, 255, 255, 0.8); }
可以看到,添加透明颜色的方法比较简单,只需要在颜色值后面加上一个透明度参数即可。需要注意的是,透明度范围是0到1之间的实数,其中0代表完全透明,1代表完全不透明。另外,RGB 和 RGBA 的区别在于后者多了一个 alpha 参数。
在实际开发中,大家可以利用背景透明度来实现一个半透明的遮罩层,或者使用文本透明度来做出一些奇特的效果,都可以提高网页的视觉效果,让网页更加美观。