Отрицательная маска в CSS в фоновом изображении - PullRequest
Новая
       57

Отрицательная маска в CSS в фоновом изображении

1 голос
/ 18 марта 2020

Я хочу создать маску в css, используя файл png, но другим способом. По сути, я не хочу, чтобы маска отображала содержимое внизу, но я хочу, чтобы она обрезала содержимое внизу и отображала все остальное. Так нравится отрицательная маска. Важным фактом является то, что я хочу замаскировать фоновое изображение. Вот что я хочу сделать:

example

У меня здесь 3 слоя. Первый - это видео (html), затем точечный фон, сделанный как повторяющийся фон (CSS фон), а затем маска - необходимо изображение в формате png, так как это будет lo go. Я хочу, чтобы маска удаляла фон под ним и отображала видео. 

.cont {
  width: 100%;
  height: 450px;
  position: relative;
  background: url("http://www.kamiennadlyna.pl/test/img/video-bg.jpg") no-repeat center;
}

.maska {
  width: 100%;
  height: 100%;
  background: url("http://www.kamiennadlyna.pl/test/img/mask.png") repeat;
  left: 0;
  bottom: 0;
  position: absolute;
  text-align: center;
  /*-webkit-mask-image: url("https://www.tucado.com/images/logo.png")*/
}
<div class="cont">

  <video autoplay muted loop id="myVideo">
          <source src="http://www.kamiennadlyna.pl/video.mp4" type="video/mp4" poster="http://www.kamiennadlyna.pl/test/img/video-bg.jpg">
        </video>

  <div class="maska">
  </div>

</div>

jsfiddle

1 Ответ

2 голосов
/ 18 марта 2020

Новый ответ

На основании обновления вы можете сделать следующее. Идея состоит в том, чтобы рассмотреть инвертированную версию вашего lo go, где вы делаете прозрачную часть непрозрачной (и непрозрачную часть прозрачной), а затем применяете несколько слоев маски, чтобы получить то, что вы хотите.

Я сохранил ту же идею из старого ответа. Я рассматриваю lo go в центре наложения: 

.overlay {
  --h:200px; /* height of the logo*/
  --w:200px; /* width of the logo */

  height:300px;
  background:radial-gradient(farthest-side,black 50%,transparent 52%) 0 0/8px 8px;
 
  -webkit-mask:
      linear-gradient(#fff,#fff) top   /100% calc(50% - var(--h)/2),
      linear-gradient(#fff,#fff) bottom/100% calc(50% - var(--h)/2),
      linear-gradient(#fff,#fff) left  /calc(50.1% - var(--w)/2) 100%,
      linear-gradient(#fff,#fff) right /calc(50.1% - var(--w)/2) 100%,
      url(https://i.ibb.co/1zDbtJw/logo.png) center/var(--w) var(--h);
  mask:
      linear-gradient(#fff,#fff) top   /100% calc(50% - var(--h)/2),
      linear-gradient(#fff,#fff) bottom/100% calc(50% - var(--h)/2),
      linear-gradient(#fff,#fff) left  /calc(50% - var(--w)/2) 100%,
      linear-gradient(#fff,#fff) right /calc(50% - var(--w)/2) 100%,
      url(https://i.ibb.co/1zDbtJw/logo.png) center/var(--w) var(--h);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}

body {
  background:url(https://i.picsum.photos/id/44/800/800.jpg) center/cover;
}
<div class="overlay"></div>

Здесь приведен связанный вопрос, объясняющий, как получить новую версию lo go: https://graphicdesign.stackexchange.com/q/63635

Мы также можем поиграть с mask-composite и сохранить исходный lo go, и было бы легче отрегулировать и изменить положение. Обратите внимание на порядок слоев маски, который важен здесь в отличие от первого примера: 

.overlay {

  height:300px;
  background:radial-gradient(farthest-side,black 50%,transparent 52%) 0 0/8px 8px;

  -webkit-mask:
      linear-gradient(#fff,#fff),
      url(https://i.ibb.co/cKBT5WQ/logo.png) center/200px 200px;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-composite:source-out;
  mask:
      linear-gradient(#fff,#fff),
      url(https://i.ibb.co/cKBT5WQ/logo.png) center/200px 200px;
  mask-repeat:no-repeat;
  mask-composite:exclude;
}

body {
  background:url(https://i.picsum.photos/id/44/800/800.jpg) center/cover;
}
<div class="overlay"></div>


Старый ответ

Я бы построил это с чистым CSS без необходимости изображений: 

.overlay {
  height:300px;
  /* the stripes */
  background:repeating-linear-gradient(to right,blue 0 10px,transparent 10px 20px);
  /* the mask*/
  -webkit-mask:
      linear-gradient(#fff,#fff) top   /100% 50px,
      linear-gradient(#fff,#fff) bottom/100% 50px,
      linear-gradient( 235deg,transparent 10%,#fff 9%) calc(50% - 600px) 50%/1200px calc(100% - 100px),
      linear-gradient(-235deg,transparent 10%,#fff 9%) calc(50% + 600px) 50%/1200px calc(100% - 100px);
  -webkit-mask-repeat:no-repeat;
  mask:
      linear-gradient(#fff,#fff) top   /100% 50px,
      linear-gradient(#fff,#fff) bottom/100% 50px,
      linear-gradient( 235deg,transparent 10%,#fff 9%) calc(50% - 600px) 50%/1200px calc(100% - 100px),
      linear-gradient(-235deg,transparent 10%,#fff 9%) calc(50% + 600px) 50%/1200px calc(100% - 100px);
  mask-repeat:no-repeat;
}

body {
  background:url(https://i.picsum.photos/id/44/800/800.jpg) center/cover;
}
<div class="overlay"></div>

Чтобы понять загадку, вот градиент, используемый для маски с разной окраской: 

.overlay {
  height:300px;
  background:
      linear-gradient(blue,blue) top   /100% 50px,
      linear-gradient(red,red)   bottom/100% 50px,
      linear-gradient( 235deg,transparent 10%,green  9%) 
         calc(50% - 600px)   50%  /    1200px calc(100% - 100px),
         /*          ^ this half of this ^ */
      linear-gradient(-235deg,transparent 10%,purple 9%) 
         calc(50% + 600px) 50%/1200px calc(100% - 100px);
  background-repeat:no-repeat;
}

body {
  background:url(https://i.picsum.photos/id/44/800/800.jpg) center/cover;
}
<div class="overlay"></div>

Вот еще один синтаксис, в котором я буду использовать CSS переменные для простого управления треугольником: 

.overlay {
  --h:200px; /* height of the triangle*/
  --w:200px; /* width of the triangle */

  height:300px;
  /* the stripes */
  background:repeating-linear-gradient(to right,blue 0 10px,transparent 10px 20px);
  /* the mask*/
  -webkit-mask:
      linear-gradient(#fff,#fff) top   /100% calc(50% - var(--h)/2),
      linear-gradient(#fff,#fff) bottom/100% calc(50% - var(--h)/2),
      linear-gradient(#fff,#fff) left  /calc(50% - var(--w)/2) 100%,
      linear-gradient(#fff,#fff) right /calc(50% - var(--w)/2) 100%,
      linear-gradient(to top right,#fff 49%,transparent 50%) calc(50% - var(--w)/4) 50%/calc(var(--w)/2) var(--h),
      linear-gradient(to top left ,#fff 49%,transparent 50%) calc(50% + var(--w)/4) 50%/calc(var(--w)/2) var(--h);
  -webkit-mask-repeat:no-repeat;
  mask:
      linear-gradient(#fff,#fff) top   /100% calc(50% - var(--h)/2),
      linear-gradient(#fff,#fff) bottom/100% calc(50% - var(--h)/2),
      linear-gradient(#fff,#fff) left  /calc(50% - var(--w)/2) 100%,
      linear-gradient(#fff,#fff) right /calc(50% - var(--w)/2) 100%,
      linear-gradient(to top right,#fff 49%,transparent 50%) calc(50% - var(--w)/4) 50%/calc(var(--w)/2) var(--h),
      linear-gradient(to top left ,#fff 49%,transparent 50%) calc(50% + var(--w)/4) 50%/calc(var(--w)/2) var(--h);
  mask-repeat:no-repeat;
}

body {
  background:url(https://i.picsum.photos/id/44/800/800.jpg) center/cover;
}
<div class="overlay"></div>
...