Question

我试图将3张图片覆盖1页，因此每张图片必须占据页面的1/3，并且在每张图片之间有一个分隔符（也是图片）。

的jsfiddle

#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;}

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

当图片需要覆盖整个页面时，图片仅覆盖身体的一小部分

1 个答案: