Question

我想要一个全宽背景，但是当我使用background-size：cover时，它的一部分会被切断。对于background-size：contains，它会在右侧重复。是否可以在没有裁剪或调整大小或重复的情况下使用完整尺寸？

CSS：

.home-3 {
    background-image: url("https://imgur.com/a/r9JRp");
    background-size: contain;
    background-attachment: fixed;
    background-repeat: no-repeat;
    height: 100%;
}

Answer 1

你试过这个吗？

body {
    background-image: url("https://imgur.com/a/r9JRp");
    background-position: center top;
    background-size: 100% auto;
}

Answer 2

试试这个设置背景大小以涵盖

.home-3 {
    background-image: url("https://imgur.com/a/r9JRp");
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

Answer 3

您需要添加以下CSS：

body, html {
    height: 100%;
    margin: 0;
}
.home-3{
background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

如何在不调整大小或裁剪的情况下获得全宽背景图像

3 个答案: