css 渐变 透明

透明也算一个颜色
百分比表示的是位置

 

线性渐变  

background: linear-gradient(blue, pink);

background: linear-gradient(to right, blue, pink);

background: linear-gradient(70deg, blue, pink);

 background: linear-gradient(red, yellow, blue, orange);

background: linear-gradient(to left, lime 28px, red 77%, cyan);

径向渐变

background: radial-gradient(red, blue);

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Images/Using_CSS_gradients

 

 

项目中写的

{ 'background-image': 'linear-gradient(to right, transparent 5%, rgba(245, 108, 108, 0.5) 20% 80%,transparent 95%)' }


图片叠加渐变
background: linear-gradient(rgba(12, 13, 20, 0.3), rgb(26, 27, 40)) , url('@/assets/test.png') ;