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 这里的演示

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