1

Имеется первый блок с bg-изображение. Слоем выше находится следующий-второй блок, но с уже bg в виде #fff, т.е. первый блок с фоном #fff перекрывает собой второй блок с bg-изображение.

Имеется-ли возможно вырезать часть фона второго блока так, чтобы мы через это отверстие увидели изображение первого блока?

Скрин-пример:

введите сюда описание изображения

3
  • можно реализовать через canvas
    – Gs D
    Commented 12 февр. 2018 в 19:33
  • А можно пример? Commented 12 февр. 2018 в 20:02
  • нужно начертить фигуру линиями, задать ее как маску и вставить изображение, все будет реализовано в одном блоке canvas и написано на js
    – Gs D
    Commented 12 февр. 2018 в 20:06

2 ответа 2

2

Можно через clip-path, в статье Аны Тюдор описано более подробно.

.wrapper {
  width: 610px;
  height: 565px;
  position: relative;
}

.wrapper > div {
  width: inherit;
  height: inherit;
}

.first-layer {
  background: url(https://i2.wp.com/digital-photography-school.com/wp-content/uploads/flickr/5661878892_15fba42846_o.jpg?resize=610%2C565&ssl=1);
  position: absolute;
}

.second-layer {
  position: absolute;
  background: #fff;
  clip-path: polygon(
  /* points of the outer triangle going counterclockwise */
  285px 150px, 83px 33px, 83px 267px, 
  
  /* return to the first point of the outer triangle */
  285px 150px, 
  
  /* points of the inner triangle going clockwise */
  258px 150px, 96px 244px, 96px 56px, 
  
  /* return to the first point of the inner triangle */
  258px 150px
  );
}
<div class="wrapper">
  <div class="first-layer"></div>
  <div class="second-layer"></div>
</div>

2

Нашли решение: https://www.sarasoueidan.com/blog/css-svg-clipping/

<svg>
  <defs>
    <clipPath id="clipping">
      <polygon points="98.4999978 153.75..."/> // ваша маска
    </clipPath>
  </defs>
</svg>

-

.item {
  clip-path: url(#clipping);
}
1

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.