Set opacity of background image without affecting child elements

Question

Is it possible to set the opacity of a background image without affecting the opacity of child elements?

Example

All links in the footer need a custom bull

Answer 1

You can use CSS linear-gradient() with 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.