我正在使用.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 {
margin:0px auto;
width:100%;
height:100%;
min-width:1320px;
text-align:center;
}
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);
}
header{
height:140px;
width:100%;
z-index:999;
position:fixed;
margin-top:-16px;
text-align:center;
background-color:darkred;
opacity:0.95;
}
#banner{
width:1320px;
height:500px;
position:fixed;
top:140px;
background-color:rgba(256, 33, 18,0.8);
text-align:center;
margin:0px auto 0px auto;
float:none;
left:0;
right:0;
}
#content{
width:1320px;
position:relative;
top:626px;
background:#ebebeb;
height:1500px;
margin-left:auto;
margin-right:auto;
z-index:10;
}
/*CSS Dropdown Menu*/
ul{
margin-top:0px;
margin-bottom:0px;
padding:0px;
list-style-type:none;
}
ul a{
text-decoration:none;
}
ul li{
float:left;
width:130px;
height:38px;
background-color:red;
font-size:20px;
line-height:38px;
text-align:center;
margin-left:2px;
}
ul li a:hover{
background-color:orangered;
}
ul li a{
display:block;
color:black;
}
ul li ul li{
display:none;
margin:0px;
}
ul li:hover ul li{
display:block;
}
/*Slider*/
#slider{
width:720px;
height:480px;
display:block;
position:absolute;
right:0;
left:0;
top:10px;
bottom:0;
margin:0 auto;
}
.info{
width:720px;
height:50px;
display:block;
position:relative;
background:black;
opacity:0.8;
z-index:1;
bottom:65px;
text-align:left;
}
.info h2{
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
color:white;
padding:5px 0 0 20px;
}
.info p{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:lighter;
color:white;
padding:30 0 0 20px;
line-height:1px;
}
img{
z-index:0;
}
#next{
width:40px;
height:50px;
text-align:center;
position:absolute;
top:220px;
right:10px;
background-color:black;
opacity:0.5;
color:white;
z-index:2;
font-size:45px;
font-weight:bold;
}
#prev{
width:40px;
height:50px;
text-align:center;
position:absolute;
top:220px;
left:10px;
background-color:black;
opacity:0.5;
color:white;
z-index:2;
font-size:45px;
font-weight:bold;
}
#pager{
width:100%;
text-align:center;
display:block;
position:absolute;
top:0;
right:;
background::;
color:;
cursor:pointer;
z-index:3;
}
#pager a{
width:10px;
height:10px;
display:inline-block;
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>
<div id="wrapper">
<header>
<h1>HEADER</h1>
<ul>
<li><a href="#">Option1</a>
<ul>
<li><a href="#">Option1.1</a></li>
<li><a href="#">Option1.2</a></li>
<li><a href="#">Option1.3</a></li>
<li><a href="#">Option1.4</a></li>
</ul>
</li>
<li><a href="#">Option2</a>
<ul>
<li><a href="#">Option2.1</a></li>
<li><a href="#">Option2.2</a></li>
<li><a href="#">Option2.3</a></li>
<li><a href="#">Option2.4</a></li>
</ul>
</li>
<li><a href="#">Option3</a>
<ul>
<li><a href="#">Option3.1</a></li>
<li><a href="#">Option3.2</a></li>
<li><a href="#">Option3.3</a></li>
<li><a href="#">Option3.4</a></li>
</ul>
</li>
<li><a href="#">Option4</a>
<ul>
<li><a href="#">Option4.1</a></li>
<li><a href="#">Option4.2</a></li>
<li><a href="#">Option4.3</a></li>
<li><a href="#">Option4.4</a></li>
</ul>
</li>
<li><a href="#">Option5</a>
<ul>
<li><a href="#">Option5.1</a></li>
<li><a href="#">Option5.2</a></li>
<li><a href="#">Option5.3</a></li>
<li><a href="#">Option5.4</a></li>
</ul>
</li>
<li><a href="#">Option6</a>
<ul>
<li><a href="#">Option6.1</a></li>
<li><a href="#">Option6.2</a></li>
<li><a href="#">Option6.3</a></li>
<li><a href="#">Option6.4</a></li>
</ul>
</li>
</ul>
</header>
<div id="banner" style="margin:0px auto">
<div id="slider">
<div id="pager"></div>
<div id="next">></div>
<div id="prev"><</div>
<div class="items">
<img alt="Error" src="images/Albena_Bulgaria-720x480.jpg"/>
<div class="info">
<h2>Insert text here</h2>
<p>Insert more text here</p>
</div>
</div>
<div class="items">
<img alt="Error" src="images/Rila_Monastery_Bulgaria-720x480.jpg"/>
<div class="info">
<h2>Insert text here</h2>
<p>Insert more text here</p>
</div>
</div>
<div class="items">
<img alt="Error" src="images/Balchik_Bulgaria-720x480.jpg"/>
<div class="info">
<h2>Insert text here</h2>
<p>Insert more text here</p>
</div>
</div>
<div class="items">
<img alt="Error" src="images/Belogradchik_Fortress_Bulgaria-720x480.jpg"/>
<div class="info">
<h2>Insert text here</h2>
<p>Insert more text here</p>
</div>
</div>
<div class="items">
<img alt="Error" src="images/Burgas_coast_Bulgaria-720x480.jpg"/>
<div class="info">
<h2>Insert text here</h2>
<p>Insert more text here</p>
</div>
</div>
<div class="items">
<img alt="Error" src="images/Downtown_Sofia_Boby_Dimitrov_1-720x480.jpg"/>
<div class="info">
<h2>Insert text here</h2>
<p>Insert more text here</p>
</div>
</div>
</div>
</div>
<div id="content">
<p>Content</p>
</div>
</div>
</body>
</html>
现在图像在页面顶部正确显示140px。但是，图像拉伸其自身高度的100％，而不是网页的高度，这意味着它的大部分底部不会显示。很多人都建议使用div，但这对我来说不是一个解决方案，因为我的Expression Web版本有一个bug，如果你在已经存在的div之前添加一个新的div，会搞乱网页布局。我总是可以用px或％设置高度，但我试图实现所有浏览器的兼容性。
对不起格式错误 - 这是我在StackOverflow社区的第一个问题。
提前谢谢。
答案 0 :(得分：1)
像这样，这里使用CSS calc()作为其高度background-size: auto calc(100% - 140px);
旁注，正如Daniel自己评论的那样，我错过了他的代码示例，需要在calc()中预先/发布运算符空格。
body {
text-align: center;
background: url('http://lorempizza.com/600/400/2');
background-position: center 140px;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: auto calc(100% - 140px);
}
如果您需要拉伸整个宽度，请将auto更改为100%上的background-size
body {
text-align: center;
background: url('http://lorempizza.com/600/400/2');
background-position: center 140px;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% calc(100% - 140px);
}
根据您的问题编辑，您添加了更多代码，这里是对它的更新，带有拉伸的，定位的背景图像
使用background-attachment: fixed;关于视口的大小，使用scroll关于元素，在这种情况下body
html,body {
margin:0px auto;
width:100%;
height:100%;
min-width:1320px;
text-align:center;
}
body {
text-align: center;
background: url('http://lorempizza.com/600/400/2');
background-position: center 140px;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% calc(100% - 140px);
}
header{
height:140px;
width:100%;
z-index:999;
position:fixed;
margin-top:-16px;
text-align:center;
background-color:darkred;
opacity:0.95;
}
#banner{
width:1320px;
height:500px;
position:fixed;
top:140px;
background-color:rgba(256, 33, 18, 0.5); /* temp. increased transparency some so image shows better */
text-align:center;
margin:0px auto 0px auto;
float:none;
left:0;
right:0;
}
#content{
width:1320px;
position:relative;
top:626px;
background:#ebebeb;
height:1500px;
margin-left:auto;
margin-right:auto;
z-index:10;
}
/*CSS Dropdown Menu*/
ul{
margin-top:0px;
margin-bottom:0px;
padding:0px;
list-style-type:none;
}
ul a{
text-decoration:none;
}
ul li{
float:left;
width:130px;
height:38px;
background-color:red;
font-size:20px;
line-height:38px;
text-align:center;
margin-left:2px;
}
ul li a:hover{
background-color:orangered;
}
ul li a{
display:block;
color:black;
}
ul li ul li{
display:none;
margin:0px;
}
ul li:hover ul li{
display:block;
}
/*Slider*/
#slider{
width:720px;
height:480px;
display:block;
position:absolute;
right:0;
left:0;
top:10px;
bottom:0;
margin:0 auto;
}
.info{
width:720px;
height:50px;
display:block;
position:relative;
background:black;
opacity:0.8;
z-index:1;
bottom:65px;
text-align:left;
}
.info h2{
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
color:white;
padding:5px 0 0 20px;
}
.info p{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:lighter;
color:white;
padding:30 0 0 20px;
line-height:1px;
}
img{
z-index:0;
}
#next{
width:40px;
height:50px;
text-align:center;
position:absolute;
top:220px;
right:10px;
background-color:black;
opacity:0.5;
color:white;
z-index:2;
font-size:45px;
font-weight:bold;
}
#prev{
width:40px;
height:50px;
text-align:center;
position:absolute;
top:220px;
left:10px;
background-color:black;
opacity:0.5;
color:white;
z-index:2;
font-size:45px;
font-weight:bold;
}
#pager{
width:100%;
text-align:center;
display:block;
position:absolute;
top:0;
right:;
background::;
color:;
cursor:pointer;
z-index:3;
}
#pager a{
width:10px;
height:10px;
display:inline-block;
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>
<div id="wrapper">
<header>
<h1>HEADER</h1>
<ul>
<li><a href="#">Option1</a>
<ul>
<li><a href="#">Option1.1</a></li>
<li><a href="#">Option1.2</a></li>
<li><a href="#">Option1.3</a></li>
<li><a href="#">Option1.4</a></li>
</ul>
</li>
<li><a href="#">Option2</a>
<ul>
<li><a href="#">Option2.1</a></li>
<li><a href="#">Option2.2</a></li>
<li><a href="#">Option2.3</a></li>
<li><a href="#">Option2.4</a></li>
</ul>
</li>
<li><a href="#">Option3</a>
<ul>
<li><a href="#">Option3.1</a></li>
<li><a href="#">Option3.2</a></li>
<li><a href="#">Option3.3</a></li>
<li><a href="#">Option3.4</a></li>
</ul>
</li>
<li><a href="#">Option4</a>
<ul>
<li><a href="#">Option4.1</a></li>
<li><a href="#">Option4.2</a></li>
<li><a href="#">Option4.3</a></li>
<li><a href="#">Option4.4</a></li>
</ul>
</li>
<li><a href="#">Option5</a>
<ul>
<li><a href="#">Option5.1</a></li>
<li><a href="#">Option5.2</a></li>
<li><a href="#">Option5.3</a></li>
<li><a href="#">Option5.4</a></li>
</ul>
</li>
<li><a href="#">Option6</a>
<ul>
<li><a href="#">Option6.1</a></li>
<li><a href="#">Option6.2</a></li>
<li><a href="#">Option6.3</a></li>
<li><a href="#">Option6.4</a></li>
</ul>
</li>
</ul>
</header>
<div id="banner" style="margin:0px auto">
<div id="slider">
<div id="pager"></div>
<div id="next">></div>
<div id="prev"><</div>
<div class="items">
<img alt="Error" src="images/Albena_Bulgaria-720x480.jpg"/>
<div class="info">
<h2>Insert text here</h2>
<p>Insert more text here</p>
</div>
</div>
<div class="items">
<img alt="Error" src="images/Rila_Monastery_Bulgaria-720x480.jpg"/>
<div class="info">
<h2>Insert text here</h2>
<p>Insert more text here</p>
</div>
</div>
<div class="items">
<img alt="Error" src="images/Balchik_Bulgaria-720x480.jpg"/>
<div class="info">
<h2>Insert text here</h2>
<p>Insert more text here</p>
</div>
</div>
<div class="items">
<img alt="Error" src="images/Belogradchik_Fortress_Bulgaria-720x480.jpg"/>
<div class="info">
<h2>Insert text here</h2>
<p>Insert more text here</p>
</div>
</div>
<div class="items">
<img alt="Error" src="images/Burgas_coast_Bulgaria-720x480.jpg"/>
<div class="info">
<h2>Insert text here</h2>
<p>Insert more text here</p>
</div>
</div>
<div class="items">
<img alt="Error" src="images/Downtown_Sofia_Boby_Dimitrov_1-720x480.jpg"/>
<div class="info">
<h2>Insert text here</h2>
<p>Insert more text here</p>
</div>
</div>
</div>
</div>
<div id="content">
<p>Content</p>
</div>
</div>
</body>
</html>