Set opacity of background image without affecting child elements

by

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;
}
<div><span>Hello world.</span></div>

More Related Contents:

  1. Using CSS for a fade-in effect on page load
  2. CSS opacity only to background color, not the text on it? [duplicate]
  3. Opacity CSS not working in IE8
  4. Opacity of background-color, but not the text [duplicate]
  5. Is there any way to hover over one element and affect a different element? [duplicate]
  6. How to set opacity in parent div and not affect in child div? [duplicate]
  7. What has bigger priority: opacity or z-index in browsers?
  8. Opacity of div’s background without affecting contained element in IE 8?
  9. Can you set a border opacity in CSS?
  10. image moves on hover – chrome opacity issue
  11. Background images: how to fill whole div if image is small and vice versa
  12. how to cancel opacity for a child element?
  13. Can I do knock-out/punch-through transparency with CSS fonts?
  14. how to handle ‘double opacity’ of two overlapping divs
  15. How to make attractive button using CSS
  16. How to create one vertical column in between rows in Flexbox [closed]
  17. How to apply a CSS filter to a background image
  18. Twitter Bootstrap 3: how to use media queries?
  19. Google Chrome Printing Page Breaks
  20. Should I avoid using !important in CSS?
  21. Font Awesome not working, icons showing as squares
  22. Right to Left support for Twitter Bootstrap 3
  23. What does the dot mean in CSS?
  24. Hidden scrollbars in Firefox (allows scrolling but just no scrollbar)
  25. Can we use any other TAG inside along with ? [duplicate]
  26. Why adding version number to CSS file path?
  27. up/down arrow key issue with typeahead control (angular bootstrap UI)
  28. How do I make card-columns order horizontally?
  29. Why does enabling hardware-acceleration in CSS3 slow down performance?
  30. SASS CSS: Target Parent Class from Child

Leave a Comment