Проблема с фоновым изображением CSS (изображение не отображается)

Question

У меня проблема с фоновым изображением, которое не отображается.

У меня есть класс, который я добавил в тег привязки.

<a class="my-class"></a>

и css для класса:

.my-class {
    background:transparent url("../images/my-bg-image.png") no-repeat 0 center
 }

Проблема в том, что фоновое изображение не отображается.

Я знаю, что это там, потому что, когда я делаю это:

<a class="my-class">&NBSP;</a>

часть изображения показывает.

У кого-нибудь есть идеи, как сделать так, чтобы изображение целиком отображалось без необходимости вставлять множество  , пожалуйста?

Answer 1

Тег

<a> является элементом inline и без содержимого не будет отображать фон, поэтому вам нужно сделать его display как элемент block или inline-block, а затем определить размер элемента.

Попробуйте с помощью:

.my-class {
    display:     block;
    width:       128px;
    height:      128px;
    background:  transparent url("../images/my-bg-image.png") no-repeat 0 center
}

Для получения дополнительной информации вы можете проверить модель коробки и дисплей свойство по стандарту CSS 2.1 w3c .

Также разделы Свойство width и Вычисление ширины и полей объясняет, почему элемент не показывает фон на пустом встроенном элементе.

Обновление:

Также рабочий проект CSS Box Model доступен на W3Csite.

Обновление 2:

В примечании, основанном только на фоновом изображении CSS для ссылки, может быть somme проблемы доступности .

Answer 2

Элемент имеет нулевую ширину, потому что у него вообще нет содержимого. Если изображение содержит полезную информацию (и оно действительно должно использоваться в качестве ссылки!), Вы должны поместить в ссылку какой-то текст и использовать любую понравившуюся вам методику замены, например:

HTML:

<a class="my-class">It‘s awesome!</a>

CSS:

.my-class {
    background:transparent url("../images/my-bg-image.png") no-repeat 0 center;
    display: inline-block; /* create a block element behaving like an inline element */
    text-indent: -1000em; /* move the inner text outside of the link */
    overflow: hidden; /* prevent text visibility */
    width: 200px; /* image width */
    height: 16px; /* image height */
}

Answer 3

Вам нужно назначить ширину для вашего якоря. Встроенные элементы не имеют ширины, если у них нет содержимого.

.my-class {
    background:transparent url("../images/my-bg-image.png") no-repeat 0 center;
    width:20px;
    height:20px;
    display:inline-block;
}

Редактировать: и, кажется, без содержания вообще необходимо также установить высоту и display:inline-block. Это заставляет элемент думать о себе внутри как о блочном элементе, но внешне действовать как встроенный.