html - 图片只占一页

Question

我正在尝试制作一个首页，其中的图像可以填满整个页面，没有空白。一些文本和链接将位于其顶部。起初，我尝试通过使用 css(z-index 等)制作一个带有类的简单图像标签来提供所需的属性，但没有成功，因为我一点经验都没有。

现在我正在尝试使用背景元素来做同样的事情。问题是我不能在不丢失设置的情况下将它限制在首页。有没有简单的解决方法，还是我应该尝试另一种方法？

HTML代码

<img class="home" src="patsas.jpg" />

<h1> some <br> text  </h1>

CSS 代码

body.home { 
              background: url(patsas.jpg) no-repeat center center fixed; 
              -webkit-background-size: cover;
              -moz-background-size: cover;
              -o-background-size: cover;
              background-size: cover;
            }

Answer 1

几个问题。首先你的图像没有终止，使 html 无效。其次，body.cover匹配 body 元素，并且仅当它具有类“cover”时。它永远不会匹配图像。

对于最终解决方案，我不会使用 <img>一点也不，只是一个<div>有背景图片:

.cover {
  /* Make the element cover the entire viewport */
  width: 100vw;
  height: 100vh;

  /* Set the background image to cover the entire element */
  background: url(https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150) center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  /* Make it stay put, if you want to.. This part wasn't really clear. */
  position: fixed;
  top: 0;
  left: 0;
}

<!-- HTML is as simple as a div -->
<div class="cover"></div>