背景url多个图像

时间:2018-09-20 17:09:11

标签: css css3

我的导航背景为三个图像(左,右,中心) 我做了一些看起来像这样的代码:

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

结果:

enter image description here

如何去除侧面居中的图像?我需要一种解决方案,该方法将以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;
}

4 个答案:

答案 0 :(得分:0)

我可以建议换个角度看这个问题吗?也许更容易用一个背景创建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,您可以轻松指定“包装器”内任何块的宽度以及子块的任何参数。

答案 1 :(得分:0)

如果您能够拉伸而不是重复中心图像,则可以使用calc来调整background-size以容纳左右图像,

使用的图像:

enter image description here enter image description here enter image description here

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变为元素的宽度减去左右图像的合并宽度。

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

答案 2 :(得分:0)

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

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

答案 3 :(得分:-1)

多个背景位置。

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