html - css 部分填充以通过背景图像浮动文本

Question

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

杰宾：

例子

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