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

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

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

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

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

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

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