背景 url 多张图片

Question

我的导航背景为三张图片（左、右、中） 我做了一些看起来像这样的代码：

.navigation-wrapper {
    background: url('../images/navigation-background-left.png') left top no-repeat,
    url('../images/navigation-background-right.png') right top no-repeat,
    url('../images/navigation-background-center.png') center repeat-x;
   height: 65px;
}

结果：

如何删除位于两侧中心的图像？我需要一个解决方案，以左 10 像素开始中心图像，以右 10 像素结束它

解决方案： 我已经解决了这个问题：

html:

 <nav id="navigation" class="navigation-wrapper">
    <ul class="navigation-content">
        <li class="navigation-item"><a href="#">Homepage</a></li>
        <li class="navigation-item"><a href="#">Wiki</a></li>
        <li class="navigation-item"><a href="#">Forum</a></li>
        <li class="navigation-item"><a href="#">Updates</a></li>
        <li class="navigation-item"><a href="#">TS3</a></li>
        <li class="navigation-item"><a href="#">English</a></li>
    </ul>
</nav>

css:

/* navigation styles */

.navigation-wrapper {
    background: url('../images/navigation-background-left.png') left top no- repeat,
    url('../images/navigation-background-right.png') right top no-repeat;
    height: 65px;
}

.navigation-content {
    background: url('../images/navigation-background-center.png')repeat-x;
    margin: 0 20px;
    height: inherit;
}

.navigation-item {
    display: inline-block;
}

.navigation-item > a {
    min-width: 125px;
}

Answer 1

我可以建议从不同的角度看这个问题吗？也许用一个背景创建 3 个不同的块然后有一个具有“display: flex”的 Wrapper 会更容易。

<div class="wrapper">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>

<style>
.wrapper {
   display: flex;
}
.wrapper > div {
   flex-grow:1
}
.one { background....}
.two { background....}
.three { background....}
</style>

因为使用 flexbox，您可以轻松指定“包装器”内任何块的宽度以及子块的任何参数。

Answer 2

如果您能够拉伸而不是重复中心图像，您可以使用calc 调整background-size 以适应左右图像，

使用的图片：

body {
  background: #f2f2f2;
}

div {
  height: 98px;
  background: url(https://i.stack.imgur.com/xwr7q.png) left no-repeat,
              url(https://i.stack.imgur.com/l21sa.png) center no-repeat, 
              url(https://i.stack.imgur.com/lB6nr.png) right no-repeat;
  background-size: 27px, calc(100% - 54px) 100%, 27px;
}

<div></div>

background-size 变为元素的宽度减去左右图像的组合宽度。

显然，这完全取决于您的中心图像是否适合拉伸。

Answer 3

多个背景位置。

另一种选择，仅使用左右背景，并将中间的背景放在 :before 伪元素中。

示例（未测试）

#my-element:before {
    content: '';
    position: absolute;
    background: url(center-part.png) top left repeat-x;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1; /* move back */
}