Question

有没有办法阻止背景图像在特定（虽然动态）点之后重复？

目前我有以下html

<ul>
  <li>variable</li>
  <li>amount</li>
  <li>of</li>
  <li>items</li>
</ul>

和css：

ul {
  background-image: url('./imgs/gridlines.png');
  background-repeat: y-repeat;
}

现在，上面重复了ul元素整个长度的图像。我的问题是我需要重复从ul的底部停止8px。

我已尝试使用background-position，但这只会改变背景，同时仍将其重复到ul元素的末尾。

我也尝试过使用background-size: 1 calc(100% - 8px);，但这对Chrome来说失败了。

fiddle

Answer 1

你可以在CSS中做到这一点......有点儿。你不能告诉background-repeat重复指定的次数;它不起作用。所以我的想法是在列表的底部粘贴一个8px的白色块，这应该可以达到非常接近预期效果的效果：

ul {
  background-image: url('http://i.imgur.com/B5k8FTP.png');
  background-repeat: y-repeat;
    padding-left:0;
    color:black;
    width:200px;
    position:relative;
}
li:last-child{
    position:relative;
    z-index:10;
}


ul::after{
    display:block;
    background-color:white;
    position:absolute;
    bottom:0px;
    height:8px;
    width:100%;
    content:"";
    z-index:1;
}

<ul>
  <li>variable</li>
  <li>amount</li>
  <li>of</li>
  <li>items</li>
</ul>

ul样式为演示设置宽度。 padding-left:0从<ul>的左侧删除边距，也是可选的。该位置设置为相对位置，因为after内容将相对于<ul> /

绝对定位

ul::after样式会在列表后插入白色块。 position:absolute和bottom:0px将其放在列表底部，相对于<ul>。 z-index设置为确保它位于底部<li>

之后

li:last-child确保它位于ul::after内容之上。

Answer 2

您可以将所需内容包装在设置为从父级继承大小的帧中 - 您想要的8 px。

如果我误解了什么，jsfiddle会很好。

编辑： Like this?

.wrapper{
    position: relative;
    left: 20px;
    height: 46px;
    background-image: url('http://i.imgur.com/qIaw9Lc.png');
    background-repeat: repeat-y;
}

在特定点之后停止背景重复

2 个答案: