0

私は現在、背景と境界線のある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;}

これは機能しません...

何か助けはありますか？

4

1 に答える 1

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/

于 2013-03-26T14:11:37.283 に答える