Как сделать такой вырез в фоне

Рейтинг: 0Ответов: 2Опубликовано: 28.04.2023

подскажите как сделать такой вырез в виде восьмёрки у фоновой заливкивведите сюда описание изображения

css html вёрстка
Источник: Stack Overflow на русском

Ответы

▲ 2

В вашем случае, поверх фонового изображения расположен блок с градиентом, в котором сделаны вырезы с помощью маски:

body {
  margin: 0;
  height: 100vh;
  background: 0 0 / cover url(https://i.sstatic.net/oYG0R.jpg) no-repeat;
}

.back {
  height: 100vh;
  background: 0 0 / cover linear-gradient(#fff8, #000d) no-repeat;
  --mask: radial-gradient(circle at 60vw calc(50% + 60px), #0000 70px, #000f 70px), 
          radial-gradient(circle at 60vw calc(50% - 40px), #0000 50px, #000f 50px);
  /* For Chrome */
  -webkit-mask-image: var(--mask);
  -webkit-mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  /* For Firefox */
  mask-image: var(--mask);
  mask-size: cover;
  mask-repeat: no-repeat;
  mask-composite: add;
}
<div class="back"></div>

Можете подсказать,как сделать восьмёрку с помощью этой маски?

body {
  margin: 0;
  height: 100vh;
  background: 0 0 / cover url(https://i.sstatic.net/oYG0R.jpg) no-repeat;
}

.back {
  height: 100vh;
  background: 0 0 / cover linear-gradient(#fff8, #000d) no-repeat;
  --mask: radial-gradient(circle at 60vw calc(50% + 60px), #000f 50px, #0000 50px 70px, #000f 70px), 
          radial-gradient(circle at 60vw calc(50% - 40px), #000f 30px, #0000 30px 50px, #000f 50px);
  /* For Chrome */
  -webkit-mask-image: var(--mask);
  -webkit-mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  /* For Firefox */
  mask-image: var(--mask);
  mask-size: cover;
  mask-repeat: no-repeat;
  mask-composite: add;
}
<div class="back"></div>

"The trouble of our time are ignoramuses, lazy and boors."

▲ 0

Как вариант, наложить две .png картинки друг на друга:

.index {
  background-image: url('https://assets.codepen.io/721952/mountFg.png');
  width: 100vw;
  background-size: 100vw 100vh;
  
  height: 100vh;
}

.index2 {
  filter: invert(1);
  background-image: url('https://assets.codepen.io/721952/cloud1.png');
  width: 100vw;
  background-size: 100vw 100vh;
  
  height: 100vh;
}
<div class="index">
  <div class="index2">
  </div>
</div>