Question

我的导航背景如下：

enter image description here

我希望在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;
            }

但这是结果： enter image description here

如何确保看到图像的所有高度？

Answer 1

试试这个一定是这样吗？ 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;
            }

Answer 2

尝试背景大小：包含，但可能会离开你＆＃34;白色＆＃34;区域取决于div大小

Answer 3

为外部块创建一个没有带repeat-x点的背景图像。创建另一个以点为中心的背景图像仅用于内部div

<div style="background:url('repeatable.jpg') repeat-x top;height:200px;">
    <div style="background:url('dot.jpg') no-repeat top center;height:200px;">
       ...
    </div>
</div>

Answer 4

//use background-positon

 nav{
       background-position: /* x and y */

   }

Answer 5

要显示100％的背景图像，（无论需要什么尺寸），您要使用不包含的包含属性。

http://tutorialzine.com/2012/06/quick-tip-fullscreen-backgrounds/

但是，你可能有更好的运气将大小保持在100％并将背景位置定位在div的底部。

过时的解决方案也是将图像切割成两个div，顶部具有纯色背景，没有图像，底部div具有阴影和圆形图像背景，并且具有固定高度。这增加了你的标记，但是这是一个非常可靠的方法来获得这种外观。

显示100％的背景

5 个答案: