缩小我在导航栏3中导航栏图像的中间位置

Question

我自己制作了一个宽度为1920像素的导航栏图像。

当屏幕分辨率变小时，我希望该图像的middel变小。现在使用默认的bootstrap col，整个图像缩小，我的角落变得很小

当我缩小时现在发生的事情的例子：

保留角落并将此图像调整为其他分辨率的最佳做法是什么。 （调整中间的大小？）

额外信息： 我无法将图像设置为背景background: url("./imgs/navbg.png")，因为图像必须在木制背景上透明。所以我用z-index玩一点，把我的导航按钮放在上面。

Answer 1

你的HTML代码：

<div class="menu">
    <div class="m-left"></div>
    <div class="m-center">
        <!-- here it goes your menu items -->
    </div>
    <div class="m-right"></div>
</div>

和你的css代码：

.menu {
    width:678px;
    position:absolute;
    z-index:999;    
}

.menu div {
    display:inline-block;
    float:left;
}

.m-left {
    background: url('http://i.imgur.com/zCF8RrX.png') no-repeat;
    width:89px;
    height:69px;    
}

.m-center {
    background: url('http://i.imgur.com/YeDTSYe.png') repeat-x;
    width:500px;
    height:69px;
}

.m-right {
    background: url('http://i.imgur.com/I8NSlTn.png') no-repeat;
    width:89px;
    height:69px;    
}

jsfiddle中的样子：

http://jsfiddle.net/697r7tx4/1/

Answer 2

因为它必须是响应我用另一种方法修复它。我为每个@media制作了一张图片，并使用了css技巧background-position: center。当你的工作响应时，这看起来是最好的方式，如果我错了，请纠正我......

示例代码：

@media (min-width: 768px) {.navbg{background: url('../imgs/Menu-992px.png') no-repeat;height:69px;background-position:center;}}
@media (min-width: 992px) {.navbg{background: url('../imgs/Menu-1200px.png') no-repeat;height:69px;background-position:center;}}
@media (min-width: 1200px) {.navbg{background: url('../imgs/Menu-1920px.png') no-repeat;height:69px;background-position:center;}}