CSS 图片与渐变叠加用法

在平面修图软件里..经常看到一张图片颜色叠加渲染后.就显得非常有摄影艺术感.

在CSS里, 同样可以做到..

实例

.box {
 /* 渐变属性一定要在 图片url的面前 */
  width: 500px;
  height: 300px;
  background: linear-gradient(to right bottom, rgba(250,0,0,.3),rgba(10,0,200,.2)), url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583405918487&di=47dd0ba32c30c2e511710318fcc50501&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fitbbs%2F1407%2F25%2Fc19%2F36709853_1406298076524_mthumb.jpg) center center no-repeat;
}

注: #### 在background属性里, 渐变属性一定要在 图片url的面前..且用 逗号隔开 如果顺序颠倒.则出错

效果:

图片颜色渐变叠加.png