Good day dear. Tell me how to implement masking backgrounds in CSS? background crossing

It is necessary to achieve that at the exit get a red circle (5 pieces) with a black contour. The effect is as if in a diva with the class el a hole and through it the lower background shines through. I tried through the clip-path but it cuts the outer, and I need something inside that would cut

.block{ width: 100px; height: 500px; background-color: red; } .el{ width: 100px; height: 100px; background-color: black; /* -webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%); */ } 
 <div class="block"> <div class="el"> <svg> <defs> <clipPath id="clipping"> <circle cx="50" cy="50" r="50" /> </clipPath> </defs> </svg> </div> </div>

  • And you can not, for example, display red circles over a black background? - br3t
  • Not. I set the background for an example so simple. In practice, there may be a complex background, and a picture, and God knows what else - BlackStar1991
  • Well, so you can make a "round" div with a background of any complexity - br3t
  • one
    It was necessary to set the task, aunt at once, but you about circles, it is not clear. ZY We need to think - br3t
  • 2
    Something like this jsfiddle.net/br3t/oo84tycz - br3t

2 answers 2

Or maybe try masks for this purpose. Let's make a mask out of the circle and through it we will look at the substrate. In the first version, I have a red square substrate, and in the second one a bitmap image.

 <svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 200 200"> <defs> <mask id="mask"> <g stroke="gray" stroke-width="4" fill="white"> <circle cx="50%" cy="50%" r="45%" /> </g> </mask> </defs> <g mask="url(#mask)"> <rect width="100%" height="100%" fill="red" /> </g> </svg>

Now the flowers. Photo Yoksel and her ideas on the use of masks

 <svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300" viewBox="0 0 300 300"> <defs> <mask id="mask"> <g stroke="gray" stroke-width="12" fill="white"> <circle cx="50%" cy="50%" r="25%" /> </g> </mask> </defs> <g mask="url(#mask)"> <image xlink:href="http://img-fotki.yandex.ru/get/6208/5091629.73/0_63193_9ffa75d7_L" width="100%" height="100%"></image> </g> </svg>

Here's a hexagon mask

 <svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300" viewBox="0 0 300 300"> <defs> <mask id="mask"> <g transform="scale(2.95) translate(18 0)" stroke="gray" stroke-width="4" fill="white"> <path d="M48.9 60.9 16.9 60.9 1.2 33.4 17.1 6.1 48.7 6.2 64.4 33.6z" /> </g> </mask> </defs> <g mask="url(#mask)"> <image xlink:href="https://img-fotki.yandex.ru/get/5106/yoksel.5a/0_44b5e_4da2ba62_orig" width="100%" height="100%"></image> </g> </svg>

Great article on masks from Yoksel

    It seems that I recently answered the same question on SO.
    The black part of the mask is removed from the element, and the white remains:

     html, body { height: 100%; margin: 0; background: linear-gradient(to top, red, blue); } svg { display: block; width: 150px; } 
     <svg viewBox="0 0 150 150"> <mask id="circles" maskUnits="objectBoundingBox"> <rect x="0" y="0" width="100%" height="100%" fill="white" /> <circle cx="40" cy="40" r="15" fill="black" /> <circle cx="80" cy="40" r="15" fill="black" /> <circle cx="70" cy="80" r="15" fill="black" /> </mask> <rect x="0" y="0" width="100%" height="100%" fill="green" style="mask: url(#circles)" /> </svg>