我正在使用以下代碼爲我的網站創建背景圖像。它正在工作並使其成爲全屏幕背景,但是,它縮小了我的圖像,我不明白爲什麼。它看起來每邊都有一英寸左右。整頁圖像問題
下面是代碼,直接從CSS技巧
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
這裏是我完整的CSS
/*!
* Start Bootstrap - Full HTML Template (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
* {margin: 0; padding: 0;}
/* Header Image Background - Change the URL below to your image path (example: ../images/background.jpg) */
html {
background: url('/images/bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
#thanks {
position: absolute;
width: 300px;
height: 75px;
z-index: 15;
top: 98%;
left: 50%;
margin: -100px 0 0 -150px;
text-decoration: none;
text-align: center;
font-size: 36px;
background-color: #3a1e49;
color: #edcd05 !important;
font-family: "Times New Roman", Times, serif;
border-radius: 25px;
}
#thanks:hover {
background-color: #edcd05;
color: #3a1e49;
}
#thanks a {
color: #edcd05;
text-decoration: none;
position: relative;
bottom: 10%;
}
#thanks a:hover {
color: #3a1e49;
}
下面是HTML
<!DOCTYPE html>
<html class="full" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Demo</title>
<link href="css/full.css" rel="stylesheet">
</head>
<body>
<!--
<div id="thanks">
<p><a href="thanks.php">Share a Memory</a></p>
</div>
-->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
您的父容器是否應用了任何填充? – Lee
你需要一個小提琴b/c我保證有一些其他的CSS使這種情況發生 - 你有一個「正常化」的css在此之前?示例 - https://the-pastry-box-project.net/oli-studholme/2013-june-3 –
我添加了完整的CSS。還是行不通。 – KevinM1990112qwq