2 qq 32219139 qq_32219139 于 2016.05.08 11:25 提问

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

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

9个回答

vx_list
vx_list   2016.05.11 11:54
已采纳

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

CSDNXIAOD
CSDNXIAOD   2016.05.08 11:32

css 透明背景 文字不透明
----------------------biu~biu~biu~~~在下问答机器人小D,这是我依靠自己的聪明才智给出的答案,如果不正确,你来咬我啊!

dxfncel
dxfncel   2016.05.09 11:04

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

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

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

vx_list
vx_list   2016.05.11 11:00

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

vx_list
vx_list   2016.05.11 11:50

就像这样

<!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
业务范围





vx_list
vx_list   2016.05.11 11:51
printf("goodbye world!");
vx_list
vx_list   2016.05.11 11:52
<!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
业务范围




vx_list
vx_list   2016.05.11 11:53
<!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>

qq_37771447
qq_37771447   2017.06.18 20:17

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

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!