Question

我的<div>符合background-image css规则 Html

<div class="myclass">Hello world</div>

CSS

.myclass
{
    background-image: url('http://www.europe-trip.cz/icons/spinner.gif');
    background-repeat: no-repeat;
    background-position:left;
    border: 1px red dotted;
}

JSFiddle DEMO

如何在div中创建背景图像以浮动文本？

P.S：我无法在当前div

中创建另一个div（或其他元素）

Answer 1

向div添加填充以移动文本。

.myclass
{
    background-image: url('http://www.europe-trip.cz/icons/spinner.gif');
    background-repeat: no-repeat;
    background-position:left;
    border: 1px red dotted;
    padding-left: 20px;
}

JS小提琴： http://jsfiddle.net/zqeTx/1/

Answer 2

您可以使用::before pseudo element。

jsfiddle Demo

.myclass:before
{
    background-image: url('http://www.europe-trip.cz/icons/spinner.gif');
    background-repeat: no-repeat;
    background-position:left;
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
}

这种方法的优点是，如果有一个包含多行的长文本，它将仅在第一行缩进文本。

Multiple lines jsFiddle Demo

Answer 3

添加text-indent css属性并将背景图像固定到顶部，这样如果文本转到第二行，背景将不会移动。

.myclass {
    background-image: url('http://www.europe-trip.cz/icons/spinner.gif');
    background-repeat: no-repeat;
    background-position:2px 2px;
    border: 1px red dotted;
    text-indent:20px;
}

Working Fiddle

Answer 4

使用此CSS DEMO HERE

.myclass
{   
    border: 1px red dotted;
}
.myclass:before
{
    background-image: url('http://www.europe-trip.cz/icons/spinner.gif');
    background-repeat: no-repeat;
    background-position:left;
    padding-left:20px;
    content:'';
}

浮动的背景图像

4 个答案: