Css 带有边框的元素的背景图像应覆盖边框

我现在有一个有背景和边界的h4

左侧的标记边框以及顶部和底部的边框必须位于蓝色背景图像所在的区域

最后，它应该是这样的：

我的想法是，我通过

z-index:

将背景放置在边界上，但这不起作用，因为边界与背景属于同一元素

我当前的代码如下所示：

.workstations .textbox h4 { 
    display: inline-block; 
    color: #3391cc; 
    font-size: 1em; font-weight: normal;
    line-height: 100%;
    background: url(images/workstations_bg.png) no-repeat; 
    border: 1px solid #dedede; 
    padding: 14px 0 9px 25px;
    } 

.workstations .textbox h4 span {
    display: inline-block; 
    color: #e86228;
    font-size: 0.9rem;
    }

不管怎么说，你想做吗？我试着做一些类似的事情

.workstations.textbox h4背景图像{
z-索引：100；}
.workstations.textbox h4边框{z-index:50；}

这是行不通的

---

有什么帮助吗？

您需要将背景的蓝色部分分离出来，然后如果您在

h4

中放置

span

，您可以使用以下方法：

h4 {background:url(http://originalimage) left center no-repeat; border:1px solid red;}
h4 span {display:block; margin:-1px 0 -1px -1px; padding:5px 10px 5px 55px; /*use the span for your padding and pad left enough for the blue*/ background:url(http://blueimage) left center no-repeat;}

---

背景的整个点将显示在边框后面。这就是为什么它是一个背景。这个背景图像到底是什么？如果它只是一个蓝色的垂直条带，那么你可以将其设置为左边框，而不是使用图像。应该还有一段距离。。。你知道，仅仅因为我有一个边界，并不意味着它是一个元素。这可能是一个好主意，但它不能100%地工作。相邻边框有一些过渡错误。就像BoltClock说的，如果是单色背景，请使用与背景相同宽度的左边框。