[英]Background image does not cover entire page
我的網站有一個非常奇怪的問題。 背景圖像不能覆蓋整個頁面,在我調整窗口大小時會創建大的白色部分。 但是,它僅在某些PC /筆記本電腦上發生。 有幾個朋友嘗試了該網站,並報告說它們在圖像縮放方面沒有問題,並且在調整窗口大小時,它始終覆蓋整個頁面。
但是,這就是向我顯示的方式: https : //gyazo.com/04a679edfb7a442d09d6e7ce8b196cf9隨時可以自行檢查該網站。
我真的希望有人能對發生的事情有所了解。 同樣,圖片不保持其長寬比,而是在調整大小時放大/縮小。
https://jsfiddle.net/dn3553pg/1/
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>onepageskiw</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="js.js"></script>
</head>
<body>
<div id="forsidediv">
<img id="forsidepic" src="baggrund.jpg">
<nav>
<ul id="menu">
<li><a href="#">Top</a></li>
<li><a href="#">Om Eventet</a></li>
<li><a href="#">Lokation</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
</div>
<div id="logodiv">
<img src="../design/logotop.png">
</div>
<div id="overskrift">
<h1>EVENTET STARTER OM</h1>
</div>
<div id="countdowner">
<table id="table">
<tr>
<div id="countdown">
<td id="id1"></td>
<td id="id2"></td>
<td id="id3"></td>
<td id="id4"></td>
</div>
<tr>
<tr>
<td class="timeLabel">DAGE</td>
<td class="timeLabel">TIMER</td>
<td class="timeLabel">MIN</td>
<td class="timeLabel">SEK</td>
</tr>
</tr>
</tr>
</table>
</div>
<div id="information">
<div>
<h2>Hvad skal der ske?</h2>
</div>
</div>
<script>
CountDownTimer('06/25/2016 10:00 AM', 'id');
function CountDownTimer(dt, id)
{
var end = new Date(dt);
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
function showRemaining() {
var now = new Date();
var distance = end - now;
if (distance < 0) {
clearInterval(timer);
document.getElementById(id).innerHTML = 'EXPIRED!';
return;
}
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);
document.getElementById(id+"1").innerHTML = days;
document.getElementById(id+"2").innerHTML = hours;
document.getElementById(id+"3").innerHTML = minutes;
document.getElementById(id+"4").innerHTML = seconds;
}
timer = setInterval(showRemaining, 1000);
}
</script>
</body>
</html>
CSS
@charset "utf-8";
@import url(https://fonts.googleapis.com/css? family=Montserrat:400|Raleway:100,400|);
body {
margin:0;
}
#forsidediv {
position:fixed;
bottom:0;
}
#forsidepic {
width: 100%;
}
#logodiv {
position:absolute;
text-align:center;
padding-top:15%;
}
#logodiv>img {
width:15%;
}
h1 {
font-family:raleway;
font-weight:100;
position:absolute;
width:100%;
text-align:center;
color:white;
letter-spacing:11px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-230%);
font-size:2.5em;
}
#countdowner {
font-family:sans-serif;
color:white;
position:absolute;
margin:0;
padding:0;
width:100%;
font-size:2em;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-20%);
}
#id1 {
font-size:2.5em;
}
#id2 {
font-size:2.5em;
}
#id3 {
font-size:2.5em;
}
#id4 {
font-size:2.5em;
}
.timeLabel {
font-size:0.7em;
color:#f1a01e;
font-family:montserrat;
font-weight:700;
}
#table {
margin:0 auto;
text-align:center;
}
#table td{
padding:0px 45px;
}
#menu {
position:absolute;
padding:0;
width:100%;
bottom:0;
text-align:center;
}
#menu>ul {
font-size:0;
}
#menu>li {
font-size:20px;
list-style:none;
display:inline-block;
text-transform:uppercase;
letter-spacing:3px;
font-family:raleway;
font-weight:400;
}
#menu>li>a {
padding:0 15px;
text-decoration:none;
color:white;
}
#menu>li>a:hover {
color:#f1a01e;
}
#information {
position:relative;
color:red;
}
您應該將圖像設置為背景,並設置為覆蓋整個背景,如下所示
html {
background: url(background.jpg) no-repeat center center fixed;
background-size: cover;
}
不要在HTML中添加img標簽,而是將圖像設置為“ #forsidediv”或“ body”標簽div的背景,並使用以下內容:background-image:url(“ paper.gif”); 然后讓它具有包含或拉伸或任何您需要的屬性。
此處的最佳做法是將圖像設置為背景,並使用background-size屬性覆蓋全屏。 這是一個例子:
.image-container {
background: url('baggrund.jpg') center center/ cover no-repeat;
}
為了闡明為什么僅在某些計算機上發生這種情況,這是因為圖像僅延伸到其完整尺寸,而沒有延伸。 因此,您的顯示器很可能比朋友的顯示器大。 您將需要添加width: 100%
以使圖像繼續延伸超出其尺寸。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.