CSS上层文字覆盖下层文字边框并且背景透明

Question

我最终想要完成这样的效果，但是写完之后发现一个问题

这是HTML

 <div id="business">
                <img src="images/shou_ye/banner2_02.png"/>
                <div id="chare">
                    <span>Business Scope</span>
                    <span>业务范围</span>
                </div>
            </div>

下面是CSS

 #chare{
    position:relative;
}
#chare span:nth-child(1){
    position:absolute;
    left:758px;
    top:-500px;
    color:#fff;
    font:48px "microsoft yahei";
    border:1px solid #fff;
    padding:28px;
    z-index:1;
} 
#chare span:nth-child(2){
    position:absolute;
    left:867px;
    top:-413px;
    color:#fff;
    font:48px "microsoft yahei";
    background-color:transparent;
    border:1px solid transparent;
    z-index:100;
    /*opacity:1;*/
}

我发现如果背景变成透明的话 边框就覆盖不上了，有什么办法能解决吗

Answer 1

不好意思，第一次使用，不知道如何发代码上来，敬请见谅