DIV中的背景图像透明度

我正在尝试使背景图像透明(没有制作透明PNG或更亮图像的选项,图像经常更改).

background: url(image.jpg) no-repeat center center / cover;
opacity: 0.2;

得到了图像,但DIV中的所有内容都是透明的.我已经搜索了一个解决方案,但似乎无法实现正确的解决方案.关于如何修复它的任何指针？

您可以使用CSS linear-gradient()使用rgba().

div {
  width: 300px;
  height: 200px;
  background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://i.imgur.com/xnh5x47.jpg");
}
span {
  background: black;
  color: white;
}

Hello world.

.page {
  position: relative;
  width: 100px;
  height: 100px;
}
.page::before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background:  url('http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg');
  opacity: 0.2;
  z-index: -1;
}
.box {
  display: inline;
  background: red;
}

  My page
  
Red box