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将限制浏览器支持。 Here概述了浏览器可以使用CSS3伪类。

Answer 2

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

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

DEMO HERE

Answer 3

尝试更改您的代码：

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/

Answer 4

您可以通过添加额外的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;
}