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

Take your image into an image editor, turn down the opacity, save it as a .png and use that instead.

Answer 2

we can figure out that by not playing with opacity just by using rgba color

e.g "background-color: rgba(0,0,0, 0.5)"

Sample :

Previous Css:

 .login-card {
  // .... others CSS
  background-color: #121e1b;
  opacity: 0.5;
}

To :

 .login-card {
      // .... others CSS
      background-color: rgba(0, 0, 0, 0.5);
    }

Answer 3

Just to add to the above..you can use the alpha channel with the new color attributes eg. rgba(0,0,0,0) ok so this is black but with zero opacity so as a parent it will not affect the child. This only works on Chrome, FF, Safari and....I thin O.

convert your hex colours to RGBA

Answer 4

This will work with every browser

div {
 -khtml-opacity:.50; 
 -moz-opacity:.50; 
 -ms-filter:"alpha(opacity=50)";
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
}

If you don't want transparency to affect the entire container and its children, check this workaround. You must have an absolutely positioned child with a relatively positioned parent.

Check demo at http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

Answer 5

You can put the image in the div:after or div:before and set the opacity on that "virtual div"

div:after {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
  opacity: 0.25;
}

found here http://css-tricks.com/snippets/css/transparent-background-images/

Answer 6

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>