У меня есть диапазон, который не имеет содержимого, но мне нужно фоновое изображение (например, стрелка).
Проблема заключается в отсутствии содержимого внутри рамки, фон не отображается.
Как я могу это решить?
Пространство с фоновым изображением и без содержимого
Ответ 1
Установить ширину; и свойства высоты пролета.
<span style="width: 90px; height: 90px; background-image: url('bg.jpg'); display:block" />
Ответ 2
Установите style="padding-left:20px".
или установите display:block; width:20px; height:20px.
Ответ 3
Попробуйте помещать неразрывное пространство внутри, то есть:
<span> </span>
Ответ 4
если вы установите его для блокировки, он будет автоматически помещаться под другим элементом, и это может вызвать некоторые проблемы в вашем дизайне.
Чтобы предотвратить это, вы можете использовать преимущества встроенного и объединить вместе, установив display:inline-block, это будет размещено как встроенное, и вам будет разрешено указывать высоту и ширину.
Ps: Это не работает на ie7.
Ответ 5
Вам не нужно использовать 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>
Выход:
Ответ 6
Вы можете сделать что-то вроде этого:
<span style="display:block;width:arrow_width;height:arrow_height;background-image:url('image_name');"> </span>