Question

我试图制作一个首页，其中的图像填满整个页面，没有空格。一些文本和链接将位于其上。起初，我试图通过制作一个带有类的简单图像标记来使用css（z-index等）来提供所需的属性，但是它没有成功，因为我根本没有经验。

现在我尝试使用background-element做同样的事情。问题是，如果不丢失设置，我无法将其限制在首页。是否有一个简单的解决方案，或者我应该尝试另一种方法？

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元素，并且只有它具有类＆＃39; cover＆＃39;。它永远不会匹配图像。

对于最终解决方案，我根本不会使用<img>，而只会使用具有背景图片的<div>：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

图片仅填充一页

1 个答案: