0
我正在使用具有.gif背景的网站，但图像的大小与我的网页不一样，所以我需要对其进行拉伸。 不过，我有一个140px头，隐藏我的背景图片的很大一部分，所以我把这个代码在CSS：设置位置顶部的拉伸背景图像
body{
text-align:center;
background:url('file:///C:/Users/user/Desktop/Bulgaria Animated Flag.gif');
background-position:center 140px;
background-repeat:no-repeat;
background-attachment:fixed;
background-size:cover;
}
所有的CSS：
html,body {
\t margin:0px auto;
\t width:100%;
\t height:100%;
\t min-width:1320px;
\t text-align:center;
}
body{
\t text-align:center;
\t background:url('file:///C:/Users/user/Desktop/Bulgaria Animated Flag.gif');
\t background-position:center 140px;
\t background-repeat:no-repeat;
\t background-attachment:fixed;
\t background-size:cover);
\t
}
header{
\t height:140px;
\t width:100%;
\t z-index:999;
\t position:fixed;
\t margin-top:-16px;
\t text-align:center;
\t background-color:darkred;
\t opacity:0.95;
}
#banner{
\t width:1320px;
\t height:500px;
\t position:fixed;
\t top:140px;
\t background-color:rgba(256, 33, 18,0.8);
\t text-align:center;
\t margin:0px auto 0px auto;
\t float:none;
\t left:0;
\t right:0;
}
#content{
\t width:1320px;
\t position:relative;
\t top:626px;
\t background:#ebebeb;
\t height:1500px;
\t margin-left:auto;
\t margin-right:auto;
\t z-index:10;
}
/*CSS Dropdown Menu*/
ul{
\t margin-top:0px;
\t margin-bottom:0px;
\t padding:0px;
\t list-style-type:none;
}
ul a{
\t text-decoration:none;
}
ul li{
\t float:left;
\t width:130px;
\t height:38px;
\t background-color:red;
\t font-size:20px;
\t line-height:38px;
\t text-align:center;
\t margin-left:2px;
}
ul li a:hover{
\t background-color:orangered;
}
ul li a{
\t display:block;
\t color:black;
}
ul li ul li{
\t display:none;
\t margin:0px;
}
ul li:hover ul li{
\t display:block;
}
/*Slider*/
#slider{
\t width:720px;
\t height:480px;
\t display:block;
\t position:absolute;
\t right:0;
\t left:0;
\t top:10px;
\t bottom:0;
\t margin:0 auto;
}
.info{
\t width:720px;
\t height:50px;
\t display:block;
\t position:relative;
\t background:black;
\t opacity:0.8;
\t z-index:1;
\t bottom:65px;
\t text-align:left;
}
.info h2{
\t font-family:Arial, Helvetica, sans-serif;
\t font-size:18px;
\t font-weight:bold;
\t color:white;
\t padding:5px 0 0 20px;
}
.info p{
\t font-family:Arial, Helvetica, sans-serif;
\t font-size:14px;
\t font-weight:lighter;
\t color:white;
\t padding:30 0 0 20px;
\t line-height:1px;
\t
}
img{
\t z-index:0;
}
#next{
\t width:40px;
\t height:50px;
\t text-align:center;
\t position:absolute;
\t top:220px;
\t right:10px;
\t background-color:black;
\t opacity:0.5;
\t color:white;
\t z-index:2;
\t font-size:45px;
\t font-weight:bold;
}
#prev{
\t width:40px;
\t height:50px;
\t text-align:center;
\t position:absolute;
\t top:220px;
\t left:10px;
\t background-color:black;
\t opacity:0.5;
\t color:white;
\t z-index:2;
\t font-size:45px;
\t font-weight:bold;
}
#pager{
\t width:100%;
\t text-align:center;
\t display:block;
\t position:absolute;
\t top:0;
\t right:;
\t background::;
\t color:;
\t cursor:pointer;
\t z-index:3;
}
#pager a{
\t width:10px;
\t height:10px;
\t display:inline-block;
\t border:1px solid #FFF;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
\t <div id="wrapper">
\t \t <header>
\t \t \t <h1>HEADER</h1>
\t \t \t <ul>
\t \t \t \t <li><a href="#">Option1</a>
\t \t \t \t \t <ul>
\t \t \t \t \t \t <li><a href="#">Option1.1</a></li>
\t \t \t \t \t \t <li><a href="#">Option1.2</a></li>
\t \t \t \t \t \t <li><a href="#">Option1.3</a></li>
\t \t \t \t \t \t <li><a href="#">Option1.4</a></li>
\t \t \t \t \t </ul>
\t \t \t \t </li>
\t \t \t \t <li><a href="#">Option2</a>
\t \t \t \t <ul>
\t \t \t \t \t \t <li><a href="#">Option2.1</a></li>
\t \t \t \t \t \t <li><a href="#">Option2.2</a></li>
\t \t \t \t \t \t <li><a href="#">Option2.3</a></li>
\t \t \t \t \t \t <li><a href="#">Option2.4</a></li>
\t \t \t \t \t </ul>
\t \t \t \t </li>
\t \t \t \t <li><a href="#">Option3</a>
\t \t \t \t \t <ul>
\t \t \t \t \t \t <li><a href="#">Option3.1</a></li>
\t \t \t \t \t \t <li><a href="#">Option3.2</a></li>
\t \t \t \t \t \t <li><a href="#">Option3.3</a></li>
\t \t \t \t \t \t <li><a href="#">Option3.4</a></li>
\t \t \t \t \t </ul>
\t \t \t \t </li>
\t \t \t \t <li><a href="#">Option4</a>
\t \t \t \t \t <ul>
\t \t \t \t \t \t <li><a href="#">Option4.1</a></li>
\t \t \t \t \t \t <li><a href="#">Option4.2</a></li>
\t \t \t \t \t \t <li><a href="#">Option4.3</a></li>
\t \t \t \t \t \t <li><a href="#">Option4.4</a></li>
\t \t \t \t \t </ul>
\t \t \t \t </li>
\t \t \t \t <li><a href="#">Option5</a>
\t \t \t \t \t <ul>
\t \t \t \t \t \t <li><a href="#">Option5.1</a></li>
\t \t \t \t \t \t <li><a href="#">Option5.2</a></li>
\t \t \t \t \t \t <li><a href="#">Option5.3</a></li>
\t \t \t \t \t \t <li><a href="#">Option5.4</a></li>
\t \t \t \t \t </ul>
\t \t \t \t </li>
\t \t \t \t <li><a href="#">Option6</a>
\t \t \t \t \t <ul>
\t \t \t \t \t \t <li><a href="#">Option6.1</a></li>
\t \t \t \t \t \t <li><a href="#">Option6.2</a></li>
\t \t \t \t \t \t <li><a href="#">Option6.3</a></li>
\t \t \t \t \t \t <li><a href="#">Option6.4</a></li>
\t \t \t \t \t </ul>
\t \t \t \t </li>
\t \t \t </ul>
\t \t </header>
\t \t
\t \t <div id="banner" style="margin:0px auto">
\t \t \t
\t \t \t <div id="slider">
\t \t \t
\t \t \t \t <div id="pager"></div>
\t \t \t \t <div id="next">></div>
\t \t \t \t <div id="prev"><</div>
\t
\t \t \t \t <div class="items">
\t \t \t \t
\t \t \t \t \t <img alt="Error" src="images/Albena_Bulgaria-720x480.jpg"/>
\t \t \t \t \t <div class="info">
\t \t \t \t \t <h2>Insert text here</h2>
\t \t \t \t \t <p>Insert more text here</p>
\t \t \t \t \t </div> \t \t \t
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div class="items">
\t \t \t \t
\t \t \t \t \t <img alt="Error" src="images/Rila_Monastery_Bulgaria-720x480.jpg"/>
\t \t \t \t \t <div class="info">
\t \t \t \t \t <h2>Insert text here</h2> \t
\t \t \t \t \t <p>Insert more text here</p> \t \t \t \t
\t \t \t \t \t </div> \t \t \t
\t \t \t \t \t \t \t \t
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div class="items">
\t \t \t \t
\t \t \t \t \t <img alt="Error" src="images/Balchik_Bulgaria-720x480.jpg"/>
\t \t \t \t \t <div class="info">
\t \t \t \t \t <h2>Insert text here</h2> \t
\t \t \t \t \t <p>Insert more text here</p> \t \t \t \t
\t \t \t \t \t </div> \t \t \t \t
\t \t \t \t \t \t \t \t
\t \t \t \t </div>
\t \t \t \t <div class="items">
\t \t \t \t
\t \t \t \t \t <img alt="Error" src="images/Belogradchik_Fortress_Bulgaria-720x480.jpg"/>
\t \t \t \t \t <div class="info">
\t \t \t \t \t <h2>Insert text here</h2> \t
\t \t \t \t \t <p>Insert more text here</p> \t \t \t \t
\t \t \t \t \t </div> \t \t \t \t
\t \t \t \t \t \t \t \t
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div class="items">
\t \t \t \t
\t \t \t \t \t <img alt="Error" src="images/Burgas_coast_Bulgaria-720x480.jpg"/>
\t \t \t \t \t <div class="info">
\t \t \t \t \t <h2>Insert text here</h2> \t
\t \t \t \t \t <p>Insert more text here</p> \t \t \t \t
\t \t \t \t \t </div> \t \t \t \t
\t \t \t \t \t \t \t \t
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div class="items">
\t \t \t \t
\t \t \t \t \t <img alt="Error" src="images/Downtown_Sofia_Boby_Dimitrov_1-720x480.jpg"/>
\t \t \t \t \t <div class="info">
\t \t \t \t \t <h2>Insert text here</h2> \t
\t \t \t \t \t <p>Insert more text here</p> \t \t \t \t
\t \t \t \t \t </div> \t \t \t \t
\t \t \t \t \t \t \t \t
\t \t \t \t </div>
\t \t \t \t
\t \t \t </div>
\t \t </div>
\t \t
\t \t <div id="content">
\t \t \t <p>Content</p>
\t \t </div>
\t </div> \t \t
</body>
</html>现在图像正确显示在页面顶部140px。但是，图片的高度为，其高度为，而不是网页的高度，这意味着它的大底部不会显示。许多人建议放置一个div，但这对我来说不是一个解决方案，因为我的Expression Web版本有一个bug，如果在现有的div之前添加一个新的div，就会弄乱网页布局。我总是可以设置px或％的高度，但我试图实现所有浏览器的兼容性。
对不起，格式不正确 - 这是我在StackOverflow社区的第一个问题。
预先感谢您。
我建议你添加HTML太（可能创造的jsfiddle/SO的代码片段）来说明这个问题，并使其代表roducible。最好的祝福。 – YakovL
感谢您的建议。我会考虑他们。 –
提供jsfiddle。在此之前，你有我的downvote。 –