背景尺寸封面不起作用
[英]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.