How can I change the transparency of the image through the opacity specified with the help of background-image without changing the transparency of the rest of the contents of the div ?

For example:

 <div class="block" style="background-image: pic.jpg;"> <h1>Текст</h1> </div>

Changing the opacity of the "block" class will naturally change the opacity and title, including, but you only need background-image

  • show your code ... more we will see - user33274

4 answers 4

There is no such property as background-opacity, but there is such an alternative: you can replace the background with a pseudo-element, and apply the opacity to it already.

 div { width: 200px; height: 200px; display: block; position: relative; } div::after { content: ""; background: url(http://calculate-this.com/sites/default/files/styles/large/public/field/image/cat-3-icon.png?itok=w4QTmWF4); opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; } 
 <div></div>

    Pseudo element

     .block { width:300px; height: 200px; position: relative; background:url(http://on-desktop.com/wps/Nature___Fields_Hilly_landscape_042589_.jpg); } .block2 { position: relative; left:40px; top:-140px; width:300px; height: 200px; z-index:1; } .block2::before { content:""; opacity: 0.5; position: absolute; z-index:-1; top: 0; left: 0; bottom: 0; right: 0; background:url(http://on-desktop.com/wps/Nature___Fields_Hilly_landscape_042589_.jpg); background-size:cover; } 
     <div class="block"> foo bar </div> <div class="block2"> baku reku </div>

    • it is possible inherit not obligatory to specify url - user33274
    • @MaksimLensky, inherit will not work in this case. Because it inherits the property from the parent element. block2 no background , so there is nothing to inherit. - Arthur
    • @Arthur see my example ... - user33274
    • @ MaksimLensky, you do not understand. block1 & block2 exist separately. In the example of Duoxx, the pseudo-element of block2 , in which inheritance cannot work. - Arthur
    • one
      @ MaksimLensky, I’m talking about this =) - Arthur

    If it's just some color, then you can set it with rgba .

     div { height: 200px; background: rgba(0, 0, 0, .2); } 
     <div> text </div>

    And if the picture, then nothing. You can use the png background, or make a replacement when needed, for example, if the screen is small and you need to make the background transparent, you can use media and simply replace it with a picture with the desired transparency.

    Although I think that there are some crutch options

    • Well, as a crutch is a Duoxx variant with absolute positioning that occurred to me. If the picture then I think to transfer the contents of the block to the next block is the best solution. - Telion
    • @Telion, yes, I thought about that too. - uzi_no_uzi

    For example, if the background is from a photo and you need to make it transparent, you can do it this way.

     * { margin: 0; padding: 0; } .item { width: 100vw; height: 100vh; background: url(http://nevseoboi.com.ua/uploads/posts/2012-02/1328215556-496551-0031795_www.nevseoboi.com.ua.jpg); background-size: 0 0; position: relative; padding-top: 20px; } .item:before { content: ""; display: block; width: inherit; height: inherit; position: absolute; top: 0; left: 0; background: inherit; background-size: cover; opacity: .4; } .item p { font-size: 2em; width: 90%; margin: 0 auto; } 
     <div class="item"> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore veniam similique libero adipisci officia unde, est neque harum. Corrupti ut consequatur totam maiores eveniet amet doloremque voluptatibus nostrum eaque nam dignissimos recusandae fuga ab, deleniti quo eligendi, repellat ea fugiat nesciunt reiciendis. Hic deleniti praesentium maxime esse consequuntur ut nesciunt! </p> </div>