Маскирование фонов CSS

426

13 января 2017, 09:55

Добрый день уважаемые. Подскажите как реализовать маскирование фонов в CSS ?

Необходимо добиться что б на выходе получить красный круг (5штук) с чёрным обводом. Эффект как-будто в диве с классом el дырка и через него просвечивает нижний фон. Я пробовал через clip-path но оно обрезает наружное, а мне надо то что внутри что б вырезало

.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>

Answer 1

А может попробовать маски для этой цели. Сделаем из круга маску и сквозь нее будем смотреть на подложку. В первом варианте у меня красный квадрат подложка, а во втором растровое изображение.

<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>

Теперь цветы. Фотка Yoksel и идеи её по использованию масок

<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>

Вот в качестве маски шестиугольник

<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>

Отличная статья о масках от Yoksel

Answer 2

Такое ощущение, что недавно отвечал на такой же вопрос на SO.
Чёрная часть маски убирается из элемента, а белая остаётся:

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>