前言

在写网页时，我在div上添加背景图片，再加上文字，但是背景太亮了

总不可能把图丢去photoshop加个黑色滤镜吧，不可能吧。如果有十几张图片也要加滤镜，那么工作是做不完的，所以...先上结果图

你看，加上去的字井没有套用滤镜，被套用的只有背景图片

解决方法

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)

Reference

Apply a Filter to a Background Image | CSS-Tricks - CSS-Tricks