image
边距:0 和填充:0 不起作用
SCSS 代码 I 输入 SCSS 代码,因为 CSS 代码在一行中
body{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
header{
width: 100%;
display: flex;
justify-content: flex-end;
background: url("img/main-img.jpg") no-repeat;
background-size: 100% 680px;
height: 680px;
网页代码
<nav>
<ul>
<li>Home</li>
<li>Feautures</li>
<li>Demos</li>
</ul>
</nav>
</header>
我猜你已经将margin: 0;
和padding: 0;
插入到你的<header>
元素中,而不是你的<body>
。要摆脱图像外部的空白区域,您只需要margin: 0;
<body>
.
要说明其工作原理,请运行下面的代码片段并选择右上角的整页选项。
body {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
/* The solution */
margin: 0;
}
header {
width: 100%;
display: flex;
justify-content: flex-end;
/* Changed for example */
background: url("https://static.structube.com/media/catalog/product/cache/1/thumbnail/900x698/9a534115b6b626c8b0e5bcde0743ce76/0/1/01-01.71.76.70_plant_cereus.jpg") no-repeat;
background-size: cover;
background-position: top center;
height: 680px;
}
<header>
<nav>
<ul>
<li>Home</li>
<li>Feautures</li>
<li>Demos</li>
</ul>
</nav>
</header>
如果您有任何问题或我误解了您的帖子,请告诉我。