拉伸带边框的背景图片

Question

以下图片表示所期望的结果。

通常我会使用三个div来应用这种情况：

<div class="holder">
    <div class="edge left"></div>
    <div class="content">background color or image stretched here</div>
    <div class="edge right"></div>
</div>

这听起来像是语义的过度使用，所以我决定尝试使用border-image，这就是最终结果:

但是，如果我设置了背景颜色，它也会作为边框的背景（可以使用带有白色背景的JPEG来解决这个问题-但这不是一个解决方案-）。

有什么想法或建议吗？首先，推荐使用border-image吗（任何浏览器渲染差异）。

下面是使用的图片和代码：

<ul id="nav">
   <li><a href="#">Test data Test data Test Data</a></li>
</ul>

#nav {
    border-width: 0px 38px;
    border-image: url(images/nav-border.png) 0 50;
    height: 30px;
}

https://jsfiddle.net/y7g7w1b3/

- Khaled

---

你能展示一下你用来生成第二张截图的代码（并上传图片）吗？ - Harry

请分享您的CSS或创建一个Fiddle。 - Gaurav Aggarwal

我已经更新了问题，包括代码和图片。同时添加了一个fiddle链接。 - Khaled

@Ken：实际上，background-color可以被剪裁，以便它不覆盖边框。我已经在我的答案中添加了该选项（以防您对此感兴趣）。 - Harry

Answer 1

解决方案1：使用填充和拉伸的边框图像

您可以使用border-image属性来实现此操作，具体设置如下：

• border-image-slice的值为fill。（请确保切片小于原始图像宽度的一半）。您可以在MDN中找到更多关于此选项的详细信息。
• border-image-repeat的值为stretch。

这适用于IE11、Edge、Firefox v45、Opera v36、Chrome v51（dev-m）。

#nav {
  border-width: 0px 38px;
  border-image: url(http://i.stack.imgur.com/5foMd.png);
  border-image-width: 34px 98px;
  border-image-slice: 17 48 fill;
  border-image-repeat: stretch;
  height: 30px;
}
#nav li {
  line-height: 30px;
}
#nav li a {
  color: white;
}

<ul id="nav">
  <li><a href="#">Test data Test data Test Data</a>
  </li>
</ul>

---

解决方案2：使用背景颜色

但是，如果我设置了背景颜色，它将作为边框的背景

您实际上可以裁剪background-color以使其不覆盖边框。只要形状的背景是纯色的，此选项就可行。

#nav {
  border-width: 0px 38px;
  border-image: url(http://i.stack.imgur.com/5foMd.png) 0 50;
  background-color: rgb(34,34,34);
  background-clip: padding-box;
  height: 30px;
}
#nav li {
  line-height: 30px;
}
#nav li a {
  color: white;
}

<ul id="nav">
  <li><a href="#">Test data Test data Test Data</a>
  </li>
</ul>

- Harry

Answer 2

我不会使用边框图片，而是会使用:before和:after。这样可以在您的容器之前和之后创建2个额外的元素。

下面是代码：

.container{
    position: relative;
}
.container:before,
.container:after{
    position: absolute;
    top: 0;
    bottom: 0;
    content: "";
    display: block;
    width: 50px;

}
.container:before{ right:100%: }
.container:after{ left: 100%; }

这将在容器的两侧创建前后元素。然后，您可以根据需要设置这两个元素的样式。

- Matej Žvan

---

谢谢你的回答。你能否详细说明一下让你避免使用边框图像的原因？ - Khaled

":before"和":after"并不真正代替"border-image"，因为"border-image"通常能做更多的事情（或者至少可以做到），而不仅仅是在两侧附加2个元素。 - haim770

Answer 3

你可以使用1像素的background-image作为background-color（我在示例中使用黑色，以base64嵌入），然后结合background-size、background-repeat和background-position来实现你的目标：

类似这样：

#nav {
    background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=);
    background-repeat: repeat-y;
    background-size: 100%;
    background-position: center center;
    border-width: 0px 38px;
    border-image: url(images/nav-border.png) 0 50;
}

看一下Fiddle。

- haim770

---

确实是一个非常有趣的方法！虽然我认为可以忽略使用“background-position”。 - Khaled