CSS部分填充以通过背景图像浮动文本

Question

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

JsBin：

例

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

#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;
}