admin 发表于 2021-11-12 18:54:10

背景图片如何渲染颜色与透明度

渐变色:
background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.1)), url(../img/glow.jpg);

变黑底:
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(../img/glow.jpg);

变白底:
background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url(../img/glow.jpg);
模板:211108

如果已经有:
background-image: url(../img/glow.jpg);
则改用:用背景色与图片进行overlay
background-blend-mode: overlay;
background-color: #222;(背景色越深则图片色加重变暗,背景色越涨则亮)
background-blend-mode:
还有更多的参数参考:CSS background-blend-mode 属性 (w3school.com.cn)

页: [1]
查看完整版本: 背景图片如何渲染颜色与透明度