Как сделать прозрачное «отверстие» в блоке с фоном?

Question

[nickostyle]

Есть блок, залитый каким то цветом. На фоне блока находится изображение. Необходимо в блоке сделать как бы "дырку", т.е. участок, в котором блок будет прозрачным. Например круглой формы. Или, как на примере, в форме сердца.

Проиллюстрирую:


Кроме как png ничего в голову не приходит.

Answer 1

[Сергей Шилов]

А ничего другого в голову и не должно придти.

div {
background-color: red;
background-image: url(images/heart.png);
background-position: center center; /*Только тут пишешь куда тебе поставить его надо*/
}

Comments

[Александр Горчаков]

hgghjgh

[nickostyle]

Таким образом фоновое изображение не "просматривается" через сердце.

Answer 2

[Maksim Zverev]

Примерно так делается - это svg.
ИМХО маски использовать нельзя пока, поддержка браузерами

Answer 3

[Trow_eu]

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

Comments

[nickostyle]

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

Да, походу придется чисто на пнг делать. Впрочем, не вижу тут ничего плохого. А вот масками работать не умею, к сожалению.

Answer 4

[Дарья Редькина]

Есть один сумасшедший вариант, если уж реально так нужно сделать ..
Разбить прямоугольник на две части, в них еще на части и через фигуры образовать "полусердца" с одной и другой стороны, соединить и прописать через z-index xD
Ну и SVG, да =)

Answer 5

[Mindr17]

Нарисовать всю красную фигуру при помощи CSS, как у них: fontawesome.io