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币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
解决css设置背景透明,文字不透明
解决css设置背景透明,文字不透明 设置元素的透明度:  -moz-opacity:0.8; /*在Firefox中设置元素透明度  filter: alpha(opacity=80); /*ie使用滤镜设置透明   但是当我们对一个标签设置背景的透明度时,往往我们并不希望该标签上的文字图片也变成半透明了。   例如:  不透明   div{-moz-opacity
CSS实现背景透明而背景上的文字不透明
在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了。但假如我们需要一个半透明遮罩的弹出层,如登陆框、注册框、提示等,这时可能需要整个页面都要被半透 明的遮罩层覆盖,那么如用背景平铺的话,此时此刻也许就不是一个好办法了,图片大了会影响加载速度,图片小了同样会增加页
CSS设置背景透明,文字不透明。
background-color: rgba(0,0,0,0.5);/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)都会读懂 */ 参考:http://www.cnblogs.com/PeunZhang/p/4089894.html
CSS实现背景透明/半透明效果 但内容文字不透明
针对透明背景,包括背景图片和背景色 一、背景完全透明  .bg{background:transparent }   二、背景半透明 这里要分两个div,一个单独设置背景透明度,另外一个放内容 margin-top:-33px;使用这个方法让文字叠加在透明背景图上。 css:  .bg{ width: 1000px; height:33px;background-color:#fff
CSS3 边框/颜色/文字与字体/背景
一、边框 1、圆角效果 border-radius 语法:border-radius: 左上角,右上角,右下角,左下角;或者border-radius:所有角都为一个值的圆角; 实心上半圆: 方法:把高度(height)设为宽度(width)的一半,并且只设置左上角和右上角的半径与元素的高度一致(大于也是可以的)。 实心圆: 方法:把宽度(width)与高度(heigh
css 文字加边框
通常我们可以对边框设置宽度(厚度)、边框样式、边框颜色这三个属性与参数。 1)、边框颜色:border-color:#000 2)、边框厚度(宽度):border-width:1px 使用数字+单位设置边框厚度宽度,如1px(边框厚度宽度为1像素),边框必须为正数字,大于0的数值。否则设置边框border样式无效。 3)、border边框样式:border-style:solid 边框样
textarea无边框文本透明背景文本样式
textarea{ border:0; background-color:transparent; /*scrollbar-arrow-color:yellow; scrollbar-base-color:lightsalmon; overflow: hidden;*/ color: #666464; height: auto; }
div边框线上添加文字
方法一:用fieldset 存在浏览器可能不支持的风险 网址:http://blog.csdn.net/ge_yulong/article/details/8137790<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <style t
CSS3 文字边框 -webkit-text-stroke 镂空的字体
转自:http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201322395338479/ CSS边框的一个不足就是只有矩形的元素才能使用。 -webkit-text-stroke可以为文字添加边框。它不但可以设置文字边框的宽度,也能设置其颜色。 而且,配合使用color: transparent属性,还可以创建镂空的字体!
【前端】CSS实现背景图片透明和文字不透明效果
项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习。 1.毛玻璃效果:背景图 + 伪类 + flite:blur(3px) .demo1{ width: 500px; height: 300px; line-height: 50px; text-align: center; } .demo1:b