使用border-image属性创建功能区效果

Question

http://jsfiddle.net/94k1wuhu/

当看着我的小提琴时，我的问题对你来说应该是显而易见的。我创建了一个边框图像来创建一个带状效果（很酷的想法，不是吗？：D）但显然背景颜色也设置了边框的背景。有没有人有想法解决这个问题？

HTML：

<div id="main">
  <p>Without background-color:</p>
  <h1>Home</h1>
  <p>With background-color:</p><br /><br />
  <h1 id="bg">Home</h1>
</div>

CSS：

body {
    background-color: #333;
}

#main {
    background-color: #efefef;
    width: 300px;
    height: 700px;
    padding: 30px 20px;
    margin: 0 auto;
}

h1 {
    margin-left: -40px;
    padding: 3px 10px 3px 20px;
    color: #fff;
    display: inline;
    letter-spacing: 1px;
    border: 20px solid transparent;
    border-image: url(http://altistest.square7.ch/templates/pscal/images/h1br.png) 20 20 20 20 stretch;
}

#bg {
    background-color: #72b743;
    margin-top: 20px;
}

Answer 1

在支持它的浏览器中，您可以添加：

background-clip: padding-box;

这允许背景（颜色和/或图像）延伸到边框，但不允许在＆＃39;下面。它，将它剪切到填充区域。可能的值（引自链接，如下所示）：

  

边界框

     

    

背景延伸到边框的外边缘（但在z顺序中位于边框下方）。

  

     

填充盒

     

    

边框下方没有绘制背景（背景延伸到填充的外边缘）。

  

     

内容框

     

    

背景画在内容框内（剪裁）。

  

参考文献：

• background-clip。