Связывание определенной части изображения в фоновом режиме

Question

У меня есть фоновое изображение [через CSS], я хочу связать определенную часть этого изображения, как будто оно говорит «Дом», и я хочу указать его на дом моего сайта.

Я думаю, что изображениеСопоставление работает только с обычными изображениями, и я не могу найти способ сделать это с помощью фонового изображения [На самом деле я не пробовал.]

Так может кто-нибудь сказать, пожалуйста, как это сделать?

Спасибо:)

Answer 1

1. Используйте прозрачный png на 1 пиксель поверх фонового изображения
2. Установите размер png для размера фона или ссылки, которую вы хотите сделать
3. Теперь вы можете просто связать этот прозрачный png или отобразить его

Если у вас возникли проблемы с размещением png в пространстве, поместите его или используйте положение: относительно, чтобы получить наложенное прозрачное изображение туда, где вам нужно.

Answer 2

Допустим, у нас есть

HTML

<div>
<a href="#home"></a>
</div>

CSS

div
{
width: 100px; /*the same width of the background image*/
height: 100px; /*the same height of the background image*/
background-image: url("#image");
position: relative;
}

div>a
{
position: absolute;
top: 10px /*the distance of the "home" part of the image from the top*/
left: 20px /*the distance of the "home" part of the image from left*/
width: 10px /*the width of the "home" part of the image*/
height: 5px /*the height of the "home" part of the image*/
display: block;
}

div>a:hover
{
outline: 1px solid black;
}