css部分填充按背景图像浮动文本

Question

我有背景图像，我使用填充文本。

JsBin：

example

HTML：

<div id="wrapper">
     text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
</div>

CSS：

#wrapper {
  padding: 10px 10px 10px 120px;
  background: url('image.jpg') no-repeat 10px 10px;
}

问题：

如何仅对div的部分使用填充？

输出：

我的试用：

将空div（100x100）放在background-image所在的位置，并将float:left添加到该空白div。但我正在寻找CSS解决方案。 请注意，我有理由在背景中使用图片，而不是div。

寻找你的建议。

Answer 1

使用伪元素取代占位符div并将其浮动，就像使用内嵌图像一样。

http://jsbin.com/egeqAMi/4

#wrapper:before {
  content:'';
  float:left;
  width:100px;
  height:100px;
}

Answer 2

你无法做到这一点，因为背景图片无法浮动。

Answer 3

使用此CSS DEMO HERE

#wrapper {
  padding: 10px 10px 10px 15px;
  background: url('http://dummyimage.com/100x100/000000/fff') no-repeat 10px 10px;
}
#wrapper:before {
  content:'';
  float:left;
  width:100px;
  height:100px;
}