Html 如何在div容器中指定背景图像高度
我有一个容器，我有两个部分，我想一次显示一个。像滚动网页一样的东西 基本上，我如何使第一个div元素（部分）有适合屏幕的自己的背景，而第二个部分应该只有一个空白屏幕。非常感谢你！请举例说明：） 这是我的css：Html 如何在div容器中指定背景图像高度,html,css,Html,Css,我有一个容器，我有两个部分，我想一次显示一个。像滚动网页一样的东西 基本上，我如何使第一个div元素（部分）有适合屏幕的自己的背景，而第二个部分应该只有一个空白屏幕。非常感谢你！请举例说明：） 这是我的css： * { box-sizing: border-box; /* look this up */ } body { margin: 0; } /* style what the sections have in common */ .container {
* {
box-sizing: border-box;
/* look this up */
}
body {
margin: 0;
}
/* style what the sections have in common */
.container {
width: 100%;
float: left;
top: 0px;
left: 0px;
text-align: center;
padding: 1em;
}
.about {
float:left;
height:auto;
width:100%;
background: url(10.jpg);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:100%;
}
/* target specific sections */
.heads {
background-color: red;
float:left;
height:auto;
width:100%;
}
<body>
<section class="container about">
About
</section>
<section class="container heads">
About
</section>
</body>
关于
关于
body, html {
height: 100%;
margin: 0;
}
.about.about {
float:left;
height:100%;
width:100%;
...}
注意：如果这是您要查找的内容，请记住将其标记为正确。将其添加到您的
.about.container{
width: 100%;
float: left;
text-align: center;
padding: 1em;
background-position: center;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:100%;
}
.about{
background: url(10.jpg);
}
.heads{
background-color: red;
}
background-size:100% 500px;