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;
}

结果：

如何去除侧面居中的图像？我需要一种解决方案，该方法将以10px左开始的中心图像开始，以10px右结束它的中心图像

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

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”的包装器。

<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

我猜背景图像的左右两侧都有透明部分，您不希望它们被透视。您可以创建偏移量并使用两个伪元素来完成，下面的示例是理论上编写的，因为我没有要测试的实际图像，请在需要时留下评论。

.navigation-wrapper {
  position: relative;
  height: 100px;
  margin: 0 20px; /* leave left and right space */
  background: url("center part") center repeat-x;
}

.navigation-wrapper:before,
.navigation-wrapper:after {
  content: "";
  position: absolute;
  top: 0;
  width: 20px;
  height: 100%;
}

.navigation-wrapper:before {
  left: -20px; /* move to outer left */
  background: url("left part") left no-repeat;
}

.navigation-wrapper:after {
  right: -20px; /* move to outer right */
  background: url("right part") right no-repeat;
}

Answer 4

多个背景位置。

另一种选择，仅使用左右背景，并将中间背景放在：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 */
}

背景url多个图像

4 个答案: