Question

任何人都可以告诉我为什么我的div不会缩放到规定的大小，并显示其背景？谢谢。

我的代码：

＆＃13;

body {
	font-family: Arial, sans-serif;
	}

	
html, body {

    overflow-x: hidden;
}

#wrapper-image {
	
}

#header-title {
	left: 0;
	align: center;
	width: 100%;
	vertical-align: middle;

}

#header-image {
	width:1280px;
	height:1280px;
	background-image: url("Westminster.jpg");
	object-fit: contain;
	background-size: cover;
}

＆＃13;

<!DOCTYPE html>
<html>
<link href = "main.css" type = "text/css" rel = "stylesheet" />

<head>
	<title> Big Oof </title>
	

</head>
<body>
	<div class = "wrapper">
	<div class = "header-image">
	<div class = "header-title">
	
	
		<h1 style="text-align:center"> Title </h1>
		</div>
		</div>
		</div>
		
	

	
	
</body>

＆＃13;

westminster.jpg是泰晤士河畔议会大厦图片的jpeg文件。谢谢！

Answer 1

您设置class所以在 css 中，您需要将.改为#

我建议你在css中了解selector：https://www.w3schools.com/cssref/css_selectors.asp

body {
	font-family: Arial, sans-serif;
	}

	
html, body {

    overflow-x: hidden;
}

.wrapper-image {
	
}

.header-title {
	left: 0;
	align: center;
	width: 100%;
	vertical-align: middle;

}

.header-image {
	width:1280px;
	height:1280px;
	background-image: url("Westminster.jpg");
	object-fit: contain;
	background-size: cover;
}

<!DOCTYPE html>
<html>
<link href = "main.css" type = "text/css" rel = "stylesheet" />

<head>
	<title> Big Oof </title>
	

</head>
<body>
	<div class = "wrapper">
	<div class = "header-image">
	<div class = "header-title">
	
	
		<h1 style="text-align:center"> Title </h1>
		</div>
		</div>
		</div>
		
	

	
	
</body>

Answer 2

您在css中使用#（id选择器），但在html
url("Westminster.jpg");似乎不是图片的正确网址。你确定它在root上吗？

＆＃13;

body {
	font-family: Arial, sans-serif;
}

	
html, body {
  overflow-x: hidden;
}

.header-title {
	left: 0;
	text-align: center;
	width: 100%;
	vertical-align: middle;
}

.header-image {
	width:1280px;
	height:1280px;
	background-image: url("http://via.placeholder.com/1280x1280");
	object-fit: contain;
	background-size: cover;
}

＆＃13;

<!DOCTYPE html>
<html>
<link href = "main.css" type = "text/css" rel = "stylesheet" />

<head>
	<title> Big Oof </title>
	

</head>
<body>
	<div class = "wrapper">
    <div class = "header-image">
      <div class = "header-title">
        <h1 style="text-align:center"> Title </h1>
      </div>
    </div>
  </div>
</body>

＆＃13;

div大小不起作用

2 个答案: