Question

我想知道为什么包含这样的作品。这是我的HTML代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Zero to Mastery | Landing Page</title>
  <link rel="stylesheet" type="text/css" href="landingPageStyle.css">    
</head>

<body>

</body>

</html>

现在，这是我的CSS代码：

body {
/* min-height: 100%;   */
width: 600px;
height: 600px;
border: 4px solid red;
background-image: url('Nature500x400.jpg');
background-size: contain;   
background-repeat: no-repeat;
}

我的问题是：为什么整个背景图片不在体内？为什么图片超出了边框，如浏览器窗口的图片所示：

https://i.stack.imgur.com/uDuzD.png

Answer 1

尝试更改为background-size:cover。您需要将此属性添加到身体内的全角div。你不能把它添加到身体

div {
/* min-height: 100%;   */
width: 100%;
height: 600px;
border: 4px solid red;
background-image: url('Nature500x400.jpg');
background-size: cover;   
background-repeat: no-repeat;
}

Answer 2

background-size：包含无法在body标签中工作

试试这个

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Zero to Mastery | Landing Page</title>
  <link rel="stylesheet" type="text/css" href="landingPageStyle.css">    
</head>

<body>
<div>

</div>
</body>

</html>

和css

    div {
width: 600px;
height: 600px;
border: 4px solid red;
background-image: url('img Url');
background-size: contain;   
background-repeat: no-repeat;
}

Answer 3

将样式应用于html代替body将解决此问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Zero to Mastery | Landing Page</title>
  <link rel="stylesheet" type="text/css" href="landingPageStyle.css">    
</head>

<body>

</body>

</html>

改为使用html：

html {
/* min-height: 100%;   */
width: 600px;
height: 600px;
border: 4px solid red;
background-image: url('Nature500x400.jpg');
background-size: contain;   
background-repeat: no-repeat;
}

background-size：包含不显示整个图片

3 个答案: