html - 背景图片从中间向右重复

Question

我正在寻找一种水平重复简单彩色背景条纹的方法，但只能从页面中心向右重复。我不确定该怎么做。

Answer 1

没有简单的方法来实现这一点，但并非不可能，您可以使用 CSS :after pseudo 来实现。

在这里，我使用了 :after 伪元素，并且我们使用 CSS 定位技术将元素定位在距 left 50% 的位置，而不是 negative z-index 我们把它推到后面。

Demo

div {
    height: 100px;
    position: relative;
    overflow: hidden;
}

div:after {
    content: "";
    left: 50%;
    width: 50%;
    background-image: url(http://virgo.unive.it/itadict/search/images/bullet.png);
    position: absolute;
    min-height: 16px;
    z-index: -1;
    top: 0;
}