Image opacity linked by CSS

Navigation
0

Is there any possibility of giving attributes to a linked item via CSS? 

#content-homepage {
    background-image: url(../img/back.jpg);
}

I wanted to decrease the opacity of this image

    
asked by anonymous 07.12.2018 / 04:19

2 answers

1

option 1: opacity works on everyone see link 

div.exemplo{
      width:150px;
      height:150px;
      background: url('https://i.imgur.com/r3MHkRT.jpg');
      opacity: 0.5
    }
<div class="exemplo"></div>

Option 2: filter see the compatibilities: link 

div.exemplo{
  width:150px;
  height:150px;
  background: url('https://i.imgur.com/r3MHkRT.jpg');
  filter: opacity(50%)
}
<div class="exemplo"></div>
    
07.12.2018 / 07:25
0

See this example: 

div.teste {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div.teste::after {
  content: "";
  background: url('https://i.imgur.com/hlwO5D2.png');
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  /* z-index: -1; */
}
<div class="teste">
</div>

Just apply to your project and voila!

If the background is overlapping some element of your project, simply uncomment the z-index line as its elements.

  

Source: CSS Tricks - Transparent Background Images

     

Image: PSDgraphics - Abstract Purple Background

    
07.12.2018 / 05:36
How to get the last update date of a file in python [closed] preventDefault does not work in Browsers for Mobile