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

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/