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

【问题标题】：css part padding to float text by background imagecss 部分填充以通过背景图像浮动文本
【发布时间】：2013-09-22 22:31:52
【问题描述】：

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

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 中。

寻找您的建议。

【问题讨论】：

标签： html css css-float padding

【解决方案1】：

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

http://jsbin.com/egeqAMi/4

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

【讨论】：

【解决方案2】：

你不能这样做，因为背景图片不能浮动。

【讨论】：

【解决方案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;
}

【讨论】：