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

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

这是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;*/
}

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

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

好吧，给个不是很好或者说是可以无视的方案。。。。

                将<span>业务范围</span>写成<span>——&nbsp业务范围&nbsp——</span>
                然后把第一个span标签的下边框不要。。。。。。
                让第二个span标签内容中的“——”充当第一个span的下边框。。。。。。

好了，要是你有什么好的建议，请给我，我也想知道怎么做。。。。。

你只要给业务范围设置同样一张背景图片就好了

就像这样

<!DOCTYPE html>




<br> .exp{width: 750px;height: 360px;background-image: url(img/bglit_2x.png);background-size: 100% 100%;margin: 80px auto;position: relative;}<br> .exp .exp_title{position: absolute;top:80px;left:100px;font-family: sans-serif;font-size: 36px;width: 550px;height: 200px;border: 1px solid whitesmoke;color: white;text-align: center;line-height: 200px;}<br> #small{position: absolute;bottom:-25px ;left: 50%;width: 200px;height: 50px;margin-left: -100px;line-height: 50px;text-align: center;color: white;font-size: 26px;background-image: url(img/bglit_2x.png);background-position: -275px -255px;border: none;}<br>




Business Scope
业务范围






<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .exp{width: 750px;height: 360px;background-image: url(img/bglit_2x.png);background-size: 100% 100%;margin: 80px auto;position: relative;}
        .exp .exp_title{position: absolute;top:80px;left:100px;font-family: sans-serif;font-size: 36px;width: 550px;height: 200px;border: 1px solid whitesmoke;color: white;text-align: center;line-height: 200px;}
        #small{position: absolute;bottom:-25px ;left: 50%;width: 200px;height: 50px;margin-left: -100px;line-height: 50px;text-align: center;color: white;font-size: 26px;background-image: url(img/bglit_2x.png);background-position: -275px -255px;border: none;}
    </style>
</head>
<body>
    <div class="exp">
        <div class="exp_title">
            Business Scope
            <div id="small">业务范围</div>
        </div>
    </div>
</body>

想到一个可以解决的办法
下面的div　可以不给它上边框
然后用绝对定位　把一个div设置好宽高当做边框补在最右边
然后字体在这个伪边框的右边
然后再在字体的右边加一个伪边框
这样的话 视觉效果就一样了