具有邊框的元素的背景圖像應覆蓋邊框

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

具有邊框的元素的背景圖像應覆蓋邊框

回答

相關問題