Html 将div边框与图像背景相结合

我想实现这样的目标：

元素的宽度为100%。我将仅使用居中的角点并与边框顶部组合：

.element { 
border-top: solid 1px #ccc ; 
background: url('../images/arrow.png') no-repeat center top; 
}

---

但边界仍在箭头内。我尝试了

up image background-1px

来隐藏边框，但没有成功。我该怎么做呢？

如果您已经在创建图像，只需将整个图像做成您想要的形状作为背景图像即可。让它足够长，这样它就可以调整到您可能想要放入的任何合理长度元素。

我用一个额外的容器解决了这个问题：

HTML:

---

JSFIDLE:

有趣的问题。这里有一个精心设计的解决方案，使用

：before

选择器将图像绝对定位在边框上。有关工作示例，请参见。有关守则如下：

div {
    border: 1px solid red; /* For demo purposes it's red */
    position: relative;
}

div:before {
    content: url('http://i.stack.imgur.com/P3zMs.png');
    position: absolute;
    top: -1px;
    width: 100%;
    text-align: center;
    line-height: 1px;
}

以下是结果的屏幕截图：

---

编辑：用于

：before

的选择器告诉我们它仅在IE8及更高版本中受支持。但更糟糕的是，据我所知，

content:url（…）

结构和a:before伪元素的

背景图像在IE9中似乎都不起作用。幸运的是，这应该属于优雅的递减…
像Mash一样，我会使用另一个元素作为背景，但与Mask不同，我会使用CSS:before或：after伪元素：

<h2>Heading</h2>

h2 {
    border-top: 1px solid #ccc;
    position: relative;
}

h2:after {
    background: url(IMAGE);
    content: " ";
    display: block;
    width: WIDTH-OF-IMAGE;
    height: HEIGHT-OF-IMAGE;
    position: absolute;
    left: 50%;
    top: -1px;
    margin-left: -WIDTH-OF-IMAGE/2;
}

标题
氢{
边框顶部：1px实心#ccc；
位置：相对位置；
}
h2：之后{
背景：url（图像）；
内容：“；
显示：块；
宽度：图像的宽度；
高度：图像的高度；
位置：绝对位置；
左：50%；
顶部：-1px；
左边距：-图像宽度/2；
}
这正是我一开始想要的，但左边距与绝对位置不符，因此这将偏离中心几个像素。啊，我错过了你的答案，我们可能是在同一时间发布的。不管怎么说，左边距确实适用于绝对定位：我更喜欢这样，因为我不必再添加其他容器。伪类太棒了！很高兴听到你喜欢这个解决方案！但有一件事我应该提到：它并不完美。事实上，这比表中暗示的还要糟糕，IE9似乎没有显示
内容：url（…）
。但我想这是另一个问题的主题……：'(
div {
    border: 1px solid red; /* For demo purposes it's red */
    position: relative;
}

div:before {
    content: url('http://i.stack.imgur.com/P3zMs.png');
    position: absolute;
    top: -1px;
    width: 100%;
    text-align: center;
    line-height: 1px;
}

<h2>Heading</h2>

h2 {
    border-top: 1px solid #ccc;
    position: relative;
}

h2:after {
    background: url(IMAGE);
    content: " ";
    display: block;
    width: WIDTH-OF-IMAGE;
    height: HEIGHT-OF-IMAGE;
    position: absolute;
    left: 50%;
    top: -1px;
    margin-left: -WIDTH-OF-IMAGE/2;
}