在引导程序中使用图像作为导航栏答案

【问题标题】：Use a image as a nav bar in bootstrap在引导程序中使用图像作为导航栏
【发布时间】：2016-06-10 09:54:14
【问题描述】：

我希望创建一个非常标准的响应式导航栏，但我想使用图像作为背景（这也是响应式的）。我似乎找不到任何关于此的引导教程或信息。有人知道如何实现吗？

图片如下：

Nav bar image

谢谢

【问题讨论】：

你至少需要尝试做某事，而不是问“勺子喂我”。
我尝试创建一个内部带有容器流体的导航，并用响应图像填充容器。但是，图像会根据实际导航调整为不同的比例。
Setting background image of a navigation bar - bootstrap的可能重复

标签： html css twitter-bootstrap-3

【解决方案1】：

使用这个例子：Navbar Template for Bootstrap

你可以这样做：

.navbar {
    background-image: url(http://i.stack.imgur.com/ZXbyJ.jpg);
    background-size: cover;
}

这里，background-size:cover 允许图像在覆盖整个导航栏的同时按比例调整大小。

然后，要为小屏幕设置不同的背景，您可以使用媒体查询：

.navbar {
    background: #60c7c6;
}
@media (min-width: 768px) {
    .navbar {
        background-image: url(http://i.stack.imgur.com/ZXbyJ.jpg);
        background-size: cover;
    }
}

【讨论】：

【解决方案2】：

这是小提琴： https://jsfiddle.net/sesn/yuggfay3/

.navbar-header { background: url(http://i.stack.imgur.com/ZXbyJ.jpg); background-size: cover; }

【讨论】：