【发布时间】：2014-09-27 05:31:35
【问题描述】：
我正在制作一个带有背景图片的网页，该网站在全页模式下看起来很好。但是当我开始重新调整浏览器的大小时，导航保持不变，但是背景图像变得太小并且有不需要的空白。 我该怎么做才能使背景图像在调整大小时符合浏览器的大小？ 谢谢大家的帮助。 :)
<html>
<link rel="stylesheet" type="text/css" href="C:\Users\tom\Desktop\CSS\Mark & Howie Wedding/itinary.css">
<meta name="viewport" content="width=device-width">
<head>
<body>
<div class="wrapper">
<ul class="nav">
<li class="home"><a href="#">Home</a></li>
<li class="location"><a href="#">Location</a></li>
<li class="itinerary"><a href="#">Itinerary</a></li>
<li class="photos"><a href="#">Howie & Mark</a></li>
</ul>
</div>
<div class="card">
<div class="sign">
<ul class="mark">
<li>Howard & Mark's wedding beings</li><br>
<li>We start dancing</li><br>
<li>Everybody has fun</li>
</ul>
</div>
</div>
</body>
</head>
</html>
body {
background-image: url("http://i.istockimg.com/file_thumbview_approve/20453608/2/stock-photo-20453608-wedding-sign.jpg");
background-repeat: no-repeat;);
background-repeat: no-repeat;
background-size: cover;
}
.wrapper {
top: 10px;
height: 175px;
width: 1100px;
background-color: black;
opacity: 0.8;
margin: auto;
border-radius: 10px;
z-index: 0;
}
.card {
display: inline-block;
width: 700px;
height: 350px;
margin: 40px;
background-color: white;
border-radius: 20px;
text-align: center;
}
.sign {
margin: 35px;
width: 617px;
height: 267px;
border: solid black;
border-radius: 5px;
font-style: oblique;
font-weight: 600;
text-align: center;
}
.mark {
font-size: 35px;
list-style-type: none;
}
ul.nav {
display: inline;
color: white;
text-decoration: none;
text-align: center;
padding: 8px 15px;
border-radius: 5px;
text-align: auto;
}
ul.nav li {
float: left;
margin-left: 50px;
}
ul.nav li.home {
padding: 35px 15px;
margin: 20px;
top: 15px;
font-weight: 100;
height: 55px;
width: 130px;
font-size: 40px;
}
ul.nav li.home:hover {
background-color: #138f00;
border-radius: 8px;
}
ul.nav li.location {
padding: 35px 15px;
margin: 20px;
font-weight: 100;
top: 15px;
height: 55px;
width: 180px;
border-radius: 5px;
font-size: 40px;
}
ul.nav li.location:hover {
background-color: #138f00;
border-radius: 8px;
}
ul.nav li.itinerary {
padding: 35px 15px;
margin: 20px;
font-weight: 100;
height: 55px;
width: 200px;
border-radius: 5px;
font-size: 40px;
}
ul.nav li.itinerary:hover {
background-color: #138f00;
border-radius: 8px;
}
ul.nav li.photos {
padding: 35px 15px;
margin: 20px;
margin-left: 40px;
font-weight: 120;
height: 55px;
width: 250px;
border-radius: 5px;
font-size: 40px;
}
ul.nav li.photos:hover {
background-color: #138f00;
border-radius: 8px;
}
ul.nav li a {
color: #faf3bc;
display: block;
text-decoration: none;
}
【问题讨论】：
-
我认为可能是导航大小的问题，当我使用 % 而不是 px 时，照片部分会跳出包装 div。 :s