我有一个导航背景是这样的:
我想以 200px 左右的高度显示这张图片的全高。这就是我现在拥有的:
HTML:
<nav>
<ul>
<li>About</li>
<li>Stop motion</li>
<li>Contact</li>
<li><a href="facebook.com"><img src="images/fb.png" alt="facebook"></a></li>
<li><a href="twitter.com"><img src="images/twitter.png" alt="twitter"></a></li>
</ul>
</nav>
CSS:
nav{
background: url(../images/navigation.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:200px;
padding:10px;
}
nav ul{
list-style-type:none;
margin:0;
padding:0;
}
nav ul li{
display:inline;
font-family: 'ralewaysemibold';
font-size:24px;
}
nav ul li img{
width:36px;
height:36px;
}
但这是结果:
如何确保我看到图像的所有高度?
最佳答案
试试这个 一定是这样吗? DEMO
HTML
<nav>
<ul>
<li>About</li>
<li>Stop motion</li>
<li>Contact</li>
<li><a href="facebook.com"><img src="images/fb.png" alt="facebook"></a></li>
<li><a href="twitter.com"><img src="images/twitter.png" alt="twitter"></a></li>
</ul>
</nav>
CSS
nav{
background: url(http://i.stack.imgur.com/5IHG6.jpg) no-repeat; /***change*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 300px;
padding:10px;
}
nav ul{
list-style-type:none;
margin:0;
padding:0;
}
nav ul li{
display:inline;
font-family: 'ralewaysemibold';
font-size:24px;
}
nav ul li img{
width:36px;
height:36px;
}
关于html - 显示 100% 的背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23954746/