Question

当我放置一个带有background-image属性的div并使用position：relative时，我最终会在图像边缘周围出现一个我不想要的白框。

我不能使用绝对值，因为我需要一个元素直接跟在背景图像下面并在不同分辨率下缩放（所以没有设置px中的高度/宽度）。

这里是CSS：

#pagehead{
    position: relative;
    background-position: center, center;
    background-image: url("Header.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    top: 0;
    bottom: 0px;
    left: 0;
    right: 0;
}

section{
    position: relative;
}

这是HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0;">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script type="text/javascript" src="animate.js"></script>
    <link rel="stylesheet" type="text/css" href="page.css">
</head>

<body>
    <div id="pagehead"></div>

    <section>
        <div id="content">
            blahblahblah
        </div>
    </section>

</body>
</html>

Answer 1

将正文边距设置为0可能会解决问题：

body { margin: 0px; }

背景图像和位置相对白色边框

1 个答案: