html - 当图片需要覆盖页面的整个部分时，图片只覆盖正文的一小部分

Question

我试图让 3 张图片覆盖 1 页，因此每张图片必须占据页面的 1/3，并且每张图片之间有一个分隔线(也是图片)。

这是我的代码的 jsfiddle https://jsfiddle.net/optjhz2m/

#background_pic1 {
    background-image:url(Pictures/daintree_rainforest_background_wallpaper-wide.jpg);
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 1000px;
}

Answer 1

如果没有太多关于这个问题的上下文，我相信 CSS3 的多重背景声明可能是适合您的解决方案，前提是您可以使用现代浏览器。您可以使用类似于我下面的背景速记。

.class{
     background: url('http://placehold.it/300x30') center 0% / 300px 30px no-repeat,
                 url('http://placehold.it/300x2') center 20% / 80% auto no-repeat, / * spacer * /
                 url('http://placehold.it/300x30') center 33% / 300px 30px no-repeat,
                 url('http://placehold.it/300x2') center 50% / 80% auto no-repeat,/ * spacer * /
                 url('http://placehold.it/300x30') center 66% / 300px 30px no-repeat;}

但是，上面提到的一个更简单的解决方案可能是将它们组合成一个图像。没有更多上下文很难知道。