在写代码的时候遇到了给背景图片设置透明度的需求,而我的背景图是使用background-image属性加上去的,怎么给这个背景图片加上透明度使我犯了难——并没有这样的api。
下面记录下我的解决过程。
翻阅mdn文档时,我发现了它给我的提示
background-image可以添加linear-gradient的属性,我个人理解linear-gradient是用来产生渐变色,具体的大家可以去看看文档。
rgba的a指的是alpha通道,一般用作不透明度参数。如果一个像素的alpha通道数值为0%,那它就是完全透明的(也就是看不见的),而数值为100%则意味着一个完全不透明的像素(传统的数字图像)。在0%和100%之间的值则使得像素可以透过背景显示出来
有了这个,透明度就可以曲线救国来完成了。
原来的
添加了linear-gradient(rgba(255, 255, 255,0.5), rgba(255, 255, 255, 0.5))后,前后的alpha设置为一样的值就相当于没有渐变(我是这样理解的,好像也没有什么问题,哈哈哈)