css 图片灰色-CSS设置div背景图片红色滤镜

前言

写网页时，给div添加背景图片和文字，但是背景太亮

不可能把图片扔进photoshop里加个红色滤镜css 图片灰色，那是不可能的。如果有十几张图片需要滤镜的话，那么工作就无休无止了，所以……先上传结果图片

您会看到，没有对求和词应用过滤器css 图片灰色，仅应用背景图像

解决方案

background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url('https://i.imgur.com/QALgrNJ.jpeg');

Linear-Gradient函数本来是用来生成渐变图的，但是如果用rgba指定起点和终点透明度为50%的红色，那么整个图像就是半透明的红色

例子

<div class="one">
  <div class="two">
    CSS设定背景图片黑色滤镜
   <div>
</div>

.one {
  position: relative;
  height: 281.25px;
  width: 500px;
  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),url('https://i.imgur.com/QALgrNJ.jpeg');
  //background-image: url('https://i.imgur.com/QALgrNJ.jpeg');
  background-size: cover;
}
.two {
  color: white;
  font-size: 60px;
}

CodePen：CSS 背景图像红色滤镜 (codepen.io)

参考

将滤镜应用到背景图像 | CSS 技巧 - CSS 技巧