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

Question

我目前有一个带背景和边框的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 background-image { z-index: 100;} .workstations .textbox h4 border { z-index: 50;}

哪个不起作用......

任何帮助？

Answer 1

您需要将背景的蓝色部分分开，然后如果您在span内放置h4，则可以使用以下内容：

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

http://jsfiddle.net/XUNJe/