HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="StyleSheet.css" rel="stylesheet" />
</head>
<body>
<header>
<h1>California Road Trip</h1>
<h2>Driving the Coast of California</h2>
</header>
<p>
Highway 1 is the infamous winding stretch of road that follows the pacific coast of the U.S. Visit this sit for a virtual experience. <i>Bon voyage!</i>
<br />
<b>Call for help now!</b>
</p>
<p>
<video controls="controls" autoplay height="300" width="500" loop>
<source src="20160628_110323_64628293200884.mp4" type="video/mp4" />
</video>
</p>
<div>
<img src="columbus-nav-850x637.jpg" alt="Background Image" />
</div>
<footer>
Copyright © 2016.
</footer>
</body>
</html>
CSS:
header{
color: #000;
text-align: center;
border: 500px;
background-color: rgba(255, 190, 0, .5);
border-radius: 20px;
}
p{
text-align: left;
margin-left: 20px;
font-family: sans-serif, Arial, 'Myriad Pro';
}
div{
position: fixed;
top: 20px;
z-index: -1;
opacity: .5;
background-size: cover;
}
footer{
position: fixed;
bottom: 10px;
margin-left: 10px;
}
背景图片没有占据整个屏幕。感谢您的帮助。
这是一个JSfiddle
最佳答案
您必须设置 div img 而不仅仅是 div。为元素指定 100% 的高度和宽度，它应该覆盖视口(viewport)。
div img {
position: fixed;
top: 20px;
z-index: -1;
opacity: .5;
background-size: cover;
height: 100%;
width: 100%
}
关于html - 背景尺寸封面不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38231246/