Question

不确定是否有诀窍这样做但我正在寻找一种方法来基本上使用CSS将背景图像（repeat-y）重复到元素底部的某个点，如80 px。 / p>

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

.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 */
}

这是小提琴：http://jsfiddle.net/T7JBx/

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

1 个答案: