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

enter image description here

左侧的标记边框和顶部和底部边框对在蓝色的背景图像奠定了该领域消失。

在决赛中，它应该是这样的：

enter image description here

我的想法是，我通过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;}

不工作...

任何帮助吗？

来源

2013-03-26 ShawnWhite

背景的整点在边界后面出现*。这就是为什么它是“背”的原因。这个背景图片究竟是什么？如果它只是一个蓝色的垂直条，那么你可以将其设置为左边界而不是使用图像。 – BoltClock 2013-03-26 14:02:34

应该还是应该离开......你知道，仅仅因为我有一个边框，它并不意味着它是背景元素。 – ShawnWhite 2013-03-26 14:03:15

可能是一个好主意，但它不会100％。相邻边界有一些转换错误。 – ShawnWhite 2013-03-26 14:09:26

您需要关闭并重新分割你的背景的蓝色部分，如果你把一个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/

来源

2013-03-26 14:11:37 Pete

谢谢，在jfiddle中工作，我会试试！ – ShawnWhite 2013-03-26 14:15:21

工作，真棒！ – ShawnWhite 2013-03-26 14:30:49

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

回答

相关问题