Question

我目前正在尝试制作目标网页，但我遇到了问题。 <img>周围有一些白色条纹，looks like this。

我希望这张照片是全屏的，没有任何条纹等。

<!DOCTYPE HTML>
<head>
    <title>Szafranowka - Apartments & Restaurant </title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
    <div id="container">

        <div id="background">
            <img src="background.jpg" id="background"> </img>
        </div>

    </div>
</body>
</html>

这是CSS：

#container
{
    width: 100%;
    height: 100%;
}

#background
{
    width: 100%;
    height: auto;
    opacity: 0.6;
    position: relative;
}

Answer 1

有自动应用于身体的填充。

只需将此添加到您的css

即可

body{
  padding:0;
  margin:0;
}

编辑：在评论中跟进的解决方案

您需要删除<img>标记并更改css中的背景div

#background
{
    width: 100%;
    height: auto;
    background: url("background.jpg");
    background-size: cover;
    opacity: 0.6;
    position: relative;
}

Answer 2

默认情况下，每个HTML标记都有一个浏览器预定义的外观/样式，例如，在您的情况下，主体在Chrome上具有margin: 8px。您需要重置所有这些预定义的样式规则，以免产生意外，请阅读https://cssreset.com/what-is-a-css-reset/处的CSS重置

此外，为了拉伸图像以覆盖所有可见区域，您需要确保body具有width: 100vw;（视口宽度）和height: 100vh;（视口高度）以及所有内容其他地方都有100%或从父母那里继承。

https://codepen.io/Raven0us/pen/KZQejX

处的工作片段

Answer 3

浏览器将自己的默认样式应用于您可以使用自己的css更改的网站。看一下这个cheat sheet

您的问题的简单解决方法是添加css：

body{
   margin:0;
}

在全屏img中删除白色条纹

3 个答案: