Вырезание полукруга из фона раздела и отображение фона позади него

Я пытался найти лучший способ сделать это, кроме использования png с прозрачностью.

Дизайнер сайта, который я создаю, вырезал эти круги из каждого раздела сайта как часть общей темы. Мне нравится его внешний вид, но реализовать его таким образом, чтобы это происходило автоматически, не очевидно.

Я пробовал маскировать SVG, но фон не отображался. Изображения в идеале могут быть заменены редактором сайта без необходимости вырезать эту часть из каждого изображения. Есть ли способ css, javascript или canvas для того, что я имею в виду?

Кроме того, в каждом разделе есть фоновые изображения. Не только сплошные цвета и градиенты.

Нажмите здесь, чтобы просмотреть пример изображения


javascript canvas css image-masking
person Gary Thorn    schedule 06.02.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

CSS представляет собой прямое позиционирование трех <div> внутри элемента-оболочки (в данном случае <section>

Два внешних <div> представляют собой полосы, а внутренний div создает иллюзию полукруга. Это делается просто путем обеспечения радиуса границы в два раза больше его ширины.

Как только круг будет отцентрован и z-index установлено, у вас есть решение.

Я оставил положить стрелку в круг до вас.

section {
  z-index: 50;
  position: relative;
  width: 100vw;
  height: 250px;
}

div {
  z-index: 25;
  position: absolute;
  height: 50%;
  width: 100%;
}
div:nth-child(1) {
 background-image: url(https://via.placeholder.com/160?text=TOP);
 }

div:nth-child(2) {
 background-image: url(https://via.placeholder.com/160/0000FF?text=CENTER);
 background-position: center;
  z-index: 999;
  top: 75px;
  left: calc((100vw/2) - 50px);
  width: 100px;
  height: 100px;
  border-radius: 200px;
}

div:nth-child(3) {
 background-image: url(https://via.placeholder.com/160/FF0000/FFFFFF?text=BOTTOM);
  bottom: 0;
  border: 1px solid black;
}
<section>
  <div></div>
  <div></div>
  <div></div>
</section>

person Randy Casburn    schedule 06.02.2021
comment
Я предполагаю, что скриншот, который я сделал, не дал ясности, но в каждом разделе есть фоновое изображение. Не сплошной цвет фона и даже не градиент. - person Gary Thorn; 06.02.2021
comment
Вы говорите, что не знаете, как поместить изображение в div в качестве фона? - person Randy Casburn; 06.02.2021
comment
Нет, я говорю, что как только вы добавите фон в оба div, прозрачная дыра исчезнет. - person Gary Thorn; 06.02.2021
comment
Я полагаю, что мог бы применить фон к обоим элементам div и размеру одного фона с обложкой и использовать javascript, чтобы соответствовать размеру фона в круге. Позвольте мне попробовать это. - person Gary Thorn; 06.02.2021
comment
Вот пример с фоновыми изображениями. Подгонка изображений зависит от вас, но это работает точно так же с тем же CSS, но с изменением цвета фона на фоновое изображение. - person Randy Casburn; 06.02.2021
comment
Кажется, я полностью ответил на ваш первоначальный вопрос. Если у вас есть изменения в вашем вопросе, пожалуйста, опубликуйте новый вопрос. - person Randy Casburn; 06.02.2021
comment
Пожалуйста, рассмотрите возможность принятия этого ответа. - person Randy Casburn; 06.02.2021