There is a style:

.wrapper { background: url("images/background.png") repeat; padding: 1px; margin-left: 40px; margin-right: 40px; margin-top: 20px; border-radius: 6px; }

And markup view

 <div class="wrapper"> Ρ‚ΡƒΡ‚ ΠΌΠΎΠ΅ содСрТимоС </div>

I want to make the background - that is, the background, in this style was translucent. Add to style

 opacity: 0.5;

And it turns out that it becomes translucent, but at the same time everything that is in this style becomes translucent too!

  • and use background: rgba -? - soledar10
  • @ soledar10 so in question the background picture goes - korytoff
  • @korytoff did not notice - soledar10

3 answers 3

Add another div. And change its z-index to hold as background.

 .wrapper { position: relative; z-index: 1; padding: 1px; margin-left: 40px; margin-right: 40px; margin-top: 20px; border-radius: 6px; } .bg { position: absolute; z-index: -1; width: 100%; height: 100%; background: url("http://placekitten.com/g/800/600") center; opacity: .4; } 
 <div class="wrapper"> <div class="bg"></div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>

  • My opinion is better to use: after or: before instead of an extra div. But it is up to you - soledar10
  • @ soledar10, I will be grateful if you argue. - LEQADA
  • When using pseudo-elements: after and: before, you are able to modify HTML markup using only CSS, without adding additional elements to HTML, and you get a cleaner markup code that looks visually better. (This is my subjective opinion, but in general it is a personal matter of everyone, what and how to use) - soledar10
  • In fact, with the div, you don't have to change anything in HTML. As for cleanliness, yes, in a sense, cleaner. Performance is also interesting. - LEQADA
  • here is your pseudo- element code - jsfiddle.net/soledar10/ybehhLkc - soledar10

For example through a pseudo element :before and absolute positioning.

 .wrapper { position: relative; height: 500px; /* for test */ } .wrapper:before { display: block; content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('https://xakep.ru/wp-content/uploads/post/58315/osx6.png'); opacity: .2; z-index: -1; } 
 <div class="wrapper"> Ρ‚ΡƒΡ‚ ΠΌΠΎΠ΅ содСрТимоС </div>

  • it doesn't work - iKey
  • @ Denis what exactly does not work? Here is a screen joxi.ru/Y2Lq3ZqhvYydA6 - korytoff
  • it turns out that the wrapper block is tightening with a red translucent background. but the background image of the block doesn’t change - iKey
  • @ Denis Changed the background in response to the picture, where the transparency does not change? - korytoff

Look so

 body{ background: url('https://im3-tub-kz.yandex.net/i?id=9d3490571d4f855b0197cd7f7b783a40&n=33&h=190&w=338') no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .wrapper{ position: relative; z-index: 1; width: 200px; height: 200px; margin: 30px; border: 1px solid #fff; overflow: hidden; color: #fff; } .wrapper:before{ z-index: -1; position: absolute; width: 200px; height: 200px; left: 0; top: 0; content: ""; background: url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTzEA1o_7CtF6NJtJ_hgz-j4TrjGFh_CiVnAHFGmwoXy_GBqRrylw'); opacity: 0.5; } .default{ position: relative; z-index: 1; width: 200px; height: 200px; margin: 30px; float: left; color: #FFF; border: 1px solid #fff; overflow: hidden; background: url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTzEA1o_7CtF6NJtJ_hgz-j4TrjGFh_CiVnAHFGmwoXy_GBqRrylw'); } 
 <div class="wrapper"> Ρ‚ΡƒΡ‚ ΠΌΠΎΠ΅ содСрТимоС </div> <div class="default"> default ΠΌΠΎΠ΅ содСрТимоС </div>