There are two blocks, one inside the other.

.first { width: 100px; height: 100px; background-color: rgba(255,0,0,0.5) } .second { width: 75px; height: 75px; background-color: rgba(0,0,255,0.5) } 
 <div class="first"> <div class="second"></div> </div>

Is it possible to remove the color overlay effect or to limit the background of the external element to the internal borders?

For example, a transparent modal window. The background shading is mixed into the background of the window itself. At the same time, the window itself may contain other blocks, which would also like to set a transparent background of a different color.

  • What does the overlay effect mean? - Yuri
  • Mixing in other words. - ldp.n

1 answer 1

Describe the task in more detail. While I can offer you several workarounds based on the example provided:

  • remove a large block, and instead add two small blocks that form a protruding part

  • use the resulting colors after applying the transparency and set them by turning off the transparency. It is enough to do this only for a small block.

  • and the third, the most successful, in my opinion. Under the small block to make a white substrate

If you tell more about the problem, you can search for more elegant solutions.

 .first { width: 100px; height: 100px; background-color: rgba(255,0,0,0.5) } .second { width: 75px; height: 75px; background-color: rgba(0,0,255,0.5) } .option_one { margin-bottom: 50px; width: 75px; height: 75px; background-color: rgba(0,0,255,0.5); position:relative; } .option_one div { background-color: rgba(255,0,0,0.5); } .helper_a { position:absolute; width:25px; height:100px; left:75px; top:0; } .helper_b { top:75px; height:25px; width:75px; left:0; position:absolute; } .option_two, .option_three { margin-bottom: 25px; width:100px; height:100px; background-color: rgba(255, 0, 0, 0.5); } .option_two div { background-color: rgb(128, 128, 255); width:75px; height:75px; } .white, .color { width:75px; height:75px; } .white { background-color:#fff; } .color { background-color:rgba(0,0,255,0.5); } 
 <div class="option_one"> <div class="helper_a"></div> <div class="helper_b"></div> </div> <div class="option_two"> <div></div> </div> <div class="option_three"> <div class="white"> <div class="color"></div> </div> </div> <div class="first"> <div class="second"></div> </div>

  • For example, a transparent modal window. The background shading is mixed into the background of the window itself. At the same time, the window itself may contain other blocks, which would also like to set a transparent background of a different color. - ldp.n