css - 使用css将背景图片重复到底部的某个位置

Question

不确定是否有技巧可以做到这一点，但我正在寻找一种方法来基本上使用 CSS 将背景图像 (repeat-y) 重复到元素底部的某个点像 80 像素。

我真的希望有办法做到这一点。

.rep-img {
    background-position: center left;
    background-repeat: repeat-y;
    background-image: url('../images/image.png');   
    background-repeat-y-stop: 80px; /* made up property */
}

Answer 1

将背景放在伪元素上:

.rep-img {
    position: relative;
}

.rep-img:before {
    content: '';
    background: url('../images/image.png');
    position: absolute;
    top: 0; right: 0; left: 0;
    bottom: 80px;
    z-index: -1; /* to push it behind any content in .rep-img */
}

这是 fiddle :http://jsfiddle.net/T7JBx/