Greetings to all who have entered.

There is a background rgba - you can make a translucent background color, there is an opacity - you can make a translucent background (including a picture), but the downside is that everything inside this style also becomes translucent.

Tell me how to make the background image translucent without changing the transparency of the nested elements? Can this be done only on css?

 <div class="полупрозрачный фон"> <div class="какой то див"> </div> </div>
  • one
    Hmm, you can't do something like this: <div> <! - container -> <div class = "translucent background" /> <div class = "what kind of div"> ... </ div> </ div> (you need to place them so that they overlap) - VladD

2 answers 2

It is necessary to make one block absolutely positioned, and the other, with content, to cover it, and both blocks need to set the same parameters, such as width / height .

For example: http://jsfiddle.net/62cF5/

I advise either to use if it is a background: rgba , transparent png , if it is a picture: a method that is higher, or a transparent png , and a method that is higher for a background without repetitions.

  • It is a pity that no other way. But the way with z-index is also normal - frank

Make a PNG image with translucency and that's it.

  • If this is a 1000x1000 picture, it would be better to save it in jpg. and add transparency by browser methods. - lampa
  • What is better? That png does not lose information? - alexlz
  • @lampa, of course there is no universal answer. It is necessary to proceed from a specific task. - Zhukov Roman
  • @alexlz with the fact that png-24 will weigh 2-3 times more than jpg with a quality of 70% - lampa
  • there would be one picture - absolutely agree, one could edit it. But a lot of pictures. And they have a big size, even in jpg format - frank