Span с фоновым изображением и без содержимого - PullRequest
Новая
       2

Span с фоновым изображением и без содержимого

21 голосов
/ 29 декабря 2010

У меня есть диапазон, в котором нет содержимого, но мне нужно фоновое изображение (кстати, стрелка).

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

Как я могу решить это?

Ответы [ 6 ]

42 голосов
/ 29 декабря 2010

установить ширину;и высота свойства пролета. 

<span style="width: 90px; height: 90px; background-image: url('bg.jpg'); display:block" />
4 голосов
/ 29 декабря 2010

Набор style="padding-left:20px".

или установить display:block; width:20px; height:20px.

1 голос
/ 29 декабря 2010

Попробуйте поместить неразрывный пробел внутри, т.е. 

<span>&nbsp;</span>
0 голосов
/ 26 января 2019

Вам не нужно использовать display: block . Вы можете использовать положение: абсолютное . Установите ширину и высоту как 100%. Это займет ширину и высоту изображения. Так что измените размер изображения в соответствии с вашими потребностями. А также изображение будет выровнено по центру текста. Ниже приведен пример. В этом я использовал изображение размером 20х20 пикселей. 

<html>
<style>
.spanImage{
    background-image: url('settings.png');
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
}
</style>
<body>
<div>This is a sample demo.<span class="spanImage"></span></div>
</body>
</html>

Выход:

enter image description here

0 голосов
/ 28 мая 2015

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

0 голосов
/ 29 декабря 2010

Вы можете сделать что-то вроде этого: 

<span style="display:block;width:arrow_width;height:arrow_height;background-image:url('image_name');">&nbsp;</span>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...