Question

我正在尝试使用伪选择器:before＆amp; :after用边框图片环绕div。但是，我想我错过了一些东西。 :after图片不会附加到元素的右侧，无论我尝试什么，文字都落在图片下方，如JsFiddle example所示。

CSS

.panel {
    border:2px solid #634e32;
    border-radius:4px;
    margin-bottom: 30px;
    background-color: #ecd8b5;
}
.panel-header{
    margin: -5px -1px 10px 2px;
    padding-left: 15px;
    background:url('http://eaassets-a.akamaihd.net/lougame/cdn/409444/resource/webfrontend/ui/win_mainoverlay_t.png') repeat-x;
}
.panel-header:before,
.panel-header:after{
    content:"";
    width:9px;
    height:36px;
    overflow:hidden;
}
.panel-header:before {
    content: url('http://eaassets-a.akamaihd.net/lougame/cdn/409444/resource/webfrontend/ui/win_mainoverlay_tl.png');
    margin-left:-20px;
}
.panel-header:after {
    content: url('http://eaassets-a.akamaihd.net/lougame/cdn/409444/resource/webfrontend/ui/win_mainoverlay_tr.png');
}

HTML 的

<div class="panel">
    <div class="panel-header">Header Title Goes Here</div>
</div>

Answer 1

http://jsfiddle.net/53xxV/

.panel {
    border:2px solid #634e32;
    border-radius:4px;
    margin-bottom: 30px;
    background-color: #ecd8b5;
    position: relative;
    padding-top:40px
}
.panel-header{
    position:absolute;
    top:0;
    left:0;
    right:0;
    padding-left: 15px;
    background:url('http://eaassets-a.akamaihd.net/lougame/cdn/409444/resource/webfrontend/ui/win_mainoverlay_t.png') repeat-x;
    height : 29px;
    color: hotpink; /* :P */
    padding-top: 10px;
}
.panel-header:before,
.panel-header:after{
    content:"";
    width:9px;
    height:36px;
    overflow:hidden;
}
.panel-header:before {
    content: url('http://eaassets-a.akamaihd.net/lougame/cdn/409444/resource/webfrontend/ui/win_mainoverlay_tl.png');
    position:absolute;
    left:0;       
    top:0;
}
.panel-header:after {
    content: url('http://eaassets-a.akamaihd.net/lougame/cdn/409444/resource/webfrontend/ui/win_mainoverlay_tr.png');
    position:absolute;
    right:0;
    top:0;
}

排队图像使用：before＆amp; ：后

1 个答案: