Question

您好我已经做过：http://inventors.000webhostapp.com 事情是我想让每个背景图像适合整个屏幕。就此而言，我搜索并发现了这个：

＆＃13;

html { 
  background: url("https://images.pexels.com/photos/370799/pexels-photo-370799.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

＆＃13;

<html>  
  <body>
    <div>
      <p>hello</p>
    </div>
	</body>
</html>

＆＃13;

这使得其中一张图片适合所有屏幕，但是当我想添加第二张图片时，我的问题就来了。我做的是创造

＆＃13;

.p1 { 
  background: url(1.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.p2{
	 background: url(2.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

＆＃13;

<html>  
  <head>
  <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <div class="p1">
      <p>hello</p>
    </div>
	<div class="p2">
	<p>hello</p>
	</div>
	</body>
</html>

＆＃13;

这使得背景图像很小（你好的高度）

问题出现了：有没有办法让这两个图像一个接一个地适合所有屏幕？

所以当我打开WebPage时，我会看到所有第一张图像，当我一直滚动到底部时，我会完全看到第二张图像？显然我打算为我的投资组合提供2个以上的背景图像，但我认为这是一个很好的方式，开头！

Answer 1

Axnyff在评论background-size:cover中指出，仅影响背景填充包含元素的方式。为了使这些元素填满屏幕，您可以使用vh viewport height unit。

body, p {
    margin: 0;
}

.p1, .p2 {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 100vh;
}

.p1 { 
    background-image: url(http://lorempixel.com/400/200/nature/1/);
}

.p2{
    background-image: url(http://lorempixel.com/400/200/nature/2/);
}

<div class="p1">
    <p>hello</p>
</div>
<div class="p2">
    <p>hello</p>
</div>

修改

一个vh单位等于视口高度的1％，因此在我的示例中使用100vh来填充视口。

Answer 2

您必须设置容器的大小。您可以使用100vh（高度）和100vw（宽度）设置容器的视口大小。请参阅以下示例：

html, body {
  padding:0;
  margin:0;
}
.p1 p, .p2 p {
  display:inline-block;
}
.p1 { 
  background: url(http://placehold.it/100x100) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:100vh;
  width:100vw;
}
.p2{
	 background: url(http://placehold.it/101x101) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:100vh;
  width:100vw;
}

<div class="p1">
  <p>hello</p>
</div>
<div class="p2">
  <p>hello</p>
</div>

如何拟合两个/ +背景图像？

2 个答案: