Question

为什么背景会突然出现？

.splash {
    width: 100%;
    height: 576px;
    background: url('/static/img/cover.jpg') no-repeat top center;
    background-size: cover;
    color: #fff;
}

enter image description here

Answer 1

您设置width: 100%;表示它显示背景的完整大小。

您可以指定所需的确切宽度。并设置：

max-width: 1000px; //example to set maximum width;

所以：

.splash {
    width: 100%;
    height: 576px;
    max-width: 2000px; //here goes your size
    background: url('/static/img/cover.jpg') no-repeat top center;
    background-size: cover;
    color: #fff;
}

Answer 2

.splash img{
width: 100%;
height: 576px;
background-size: cover;
color: #fff;
}

Answer 3

如果您希望将其调整为设备，请将其添加到<head>标记内：

<meta name="viewport" content="width=device-width">

然后将其添加到<head>标记内：

<style>
img {
    max-width: 100%;
}
</style>

然后在你的CSS中你将.splash的宽度设置为100％它应该填充任何设备上的页面。

响应设计问题与div背景

3 个答案: