背景尺寸封面不起作用
[英]Background Size Cover not working
问题描述
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
5 个解决方案
解决方案1
2 已采纳 2016-07-06 18:42:57
您必须设置 div img 而不仅仅是 div。 给元素一个 100% 的高度和宽度，它应该覆盖视口。
div img {
position: fixed;
top: 20px;
z-index: -1;
opacity: .5;
background-size: cover;
height: 100%;
width: 100%
}
解决方案2
1 2016-07-06 18:45:37
背景图片是一个 css 属性，但您正在尝试将其应用于图片标签。 你会想要做这样的事情：
HTML：
<div class="myBackground"></div>
CSS：
.myBackground{
background-image: url(columbus-nav-850x637.jpg);
background-size: cover;
/*You can make this background fixed on desktop by adding this:*/
background-attachment: fixed;
}
解决方案3
0 2016-07-06 18:39:35
将这些属性添加到 css 文件中的 div 部分 {
-moz-background-size: 封面；
-o-background-size: 封面；
-webkit-background-size: 封面；
}
解决方案4
0 2016-07-06 19:00:46
您希望用作页面背景的图像放置在一个小于页面大小的 div 中。 因此，即使图像填充了 div，它也不会填充页面。
一种可能的解决方案是按照理查德的建议直接在身体上应用背景图像。
但是，如果您希望图像位于单独的 div 中，则首先需要使 div 覆盖整个页面。 对 CSS 属性的小更新应该可以做到。
div{
position: fixed;
top: 20px;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
opacity: .5;
background-size: cover;
}
接下来，您需要使图像覆盖整个 div。 您可以通过设置来做到这一点
width: 100%;
height: 100%;
在 img 标签上，或者完全删除 img 标签并添加
background-image: url("columbus-nav-850x637.jpg");
在 div 本身的 css 中。 您可能还需要在“背景”div 上设置适当的 z-index 以将其分层在页面的其他内容之后。
解决方案5
0 2020-06-19 08:22:52
检查“背景附件”参数。 它不应该具有“固定”值！
背景尺寸封面不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.