html - 引导导航栏的固定宽度背景图像

Question

如何设置 790px 的固定宽度图像？我怎样才能让它在显示完整图像的地方也有响应？我的代码如下所示。

 <div class="span10 offset1">
                <div class="navbar">
                <div class="navbar-inner">
                    <div class="container">
                        <div style="text-align: center">
                            <ul class="nav">
                                <li class="active"><a href="#">Home</a></li>
                                <li><a href="#about">About</a></li>
                                <li><a href="#contact">Contact</a></li>

                            </ul>

                        </div>
                    </div>
                </div>
            </div>
     </div>

我的CSS是：

.navbar-inner{


    background-color: transparent;
    background-image: url("../img/nav_bg.png");
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    height: 62px;
    width:88%;
    text-align: center;
    margin: 0 auto;
    min-width: 320px;
    max-width: 790px;
    border: 0;

}

这是我 在 iPad 或 iPhone 上看到的图像，它会剪切图像（两侧的按钮）并显示零件。像波纹管.. 我做错了什么？

Answer 1

您需要使用 CSS3background-size属性，并将其设置为cover. 正如 João 所指出的，这仅适用于支持此属性的浏览器（IE9+、Firefox 4+、Opera、Chrome 和 Safari 5+）。

HTML

<div class="span10 offset1">
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <div style="text-align: center">
                    <ul class="nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
             </div>
         </div>
    </div>
</div>

CSS

.navbar-inner {
  background-size:cover;
}

这是一个jsFiddle 展示它的实际操作。