我正在尝试制作一个首页,其中的图像可以填满整个页面,没有空白。一些文本和链接将位于其顶部。起初,我尝试通过使用 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;
}
最佳答案
几个问题。首先你的图像没有终止,使 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>
关于html - 图片只占一页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35102985/