html - css 将填充添加到背景位置 [仅 css]

Question

我有这个 div：

原来的：

想要的输出：

我想像这样排到 div 的末尾：

注意： div 与 ! 如果我调整屏幕大小，输出将相同

编辑：

无 HTML 标记编辑（仅限 CSS）

我的尝试：

但是如果我在背景中设置background-repeat图像x-repeat也会过时，我想避免这种情况：

例子：

http://jsbin.com/OCuxOKi/2/edit

http://jsfiddle.net/xVW4u/

HTML：

<div class="date">
25.4.2013
</div>

CSS：

.date {
  background-color: red;
  background-image: url('time_line.png');
  background-position: 80px center;
  background-repeat: no-repeat;
}

Answer 1

如果你不能编辑你的 HTML 标记，有一种方法可以用 CSS3 伪类:after
将背景图片添加为:after.

我快速创建了一个CodePen Demo。只需使用:after，您将获得无需编辑 HTML 标记的解决方案。

HTML

<div class="date">
   25.4.2013
</div>

CSS

.date {
  background-color: red;
  position: relative;
  overflow: hidden;
}
.date:after{
  position:absolute;
  content:'';

  width: 100%;
  height: 100%;
  margin-left: 15px;

  background-image: url('http://mike.php5.sk/public/time_line.png');
  background-position: 80px center;
}

在Smashing Magazine上学习如何使用 CSS3 伪类

正如 Ruddy 在评论中所说，使用 CSS3 会限制浏览器的支持。这是一个浏览器可以使用 CSS3 伪类的概述。

Answer 2

你可以通过添加一个额外的 div 来做到这一点。

<div class="date">
    <span>25.4.2013</span>
    <div></div>
</div>

然后de CSS：

.date {
  background-color: red;
  height: 20px;
}
.date span{
  float: left;
  width: 100px;
  height: 20px;
  line-height: 20px;
}
.date div{
  background-image: url('time_line.png');
  background-repeat: repeat-x;
  margin: 0 0 0 100px;
  height: 20px;
}

Answer 3

我可以想办法欺骗它，我认为这不是最好的方法，但它确实有效。

HTML：

<div class="date"> <span>25.4.2013</span>
</div>

CSS：

.date {
    background-color: red;
    background-image: url('http://mike.php5.sk/public/time_line.png');
    background-position: 80px center;
    background-repeat: x-repeat;
}
.date span {
    background: red;
    padding-right: 10px;
}

在这里演示

Answer 4

尝试像这样更改您的代码：

HTML：

<div class="date">
    <div style="background: red; display: inline-block; padding: 0px 10px;">
        25.4.2013
    </div>
</div>

CSS：

.date {
    background-color: red;
    background-image: url('http://mike.php5.sk/public/time_line.png');
}

编辑：

我想好怎么办了。它确实存在一个名为background-size：

HTML：

<div class="date">
    25.4.2013
</div>

CSS：

.date {
    background-color: red;
    background-image: url('http://mike.php5.sk/public/time_line.png');
    background-size:100% 100%;
    background-position: 80px center;
    background-repeat:no-repeat;
}

在这里小提琴：http: //jsfiddle.net/JonnyMe/xVW4u/11/