css样式标题类

clipboard.png
背景是一张星空图,这样的样式有什么的好的方法么?我拿z-index和定位做了位置,背景是透明的,这样写边框横向会从中间穿过。
clipboard.png

阅读 5.9k
6 个回答

看代码吧
html

<div class="panel">
    <div class="title">
        TOP5最高内存使用率
    </div>
    <div class="line left-line"></div>
    <div class="line right-line"></div>
</div>

css:

body{
    background:url(http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/01/0E/ChMkJ1bKwdSIdF7rAAjElpXhmy0AALGegGv1KcACMSu795.jpg) repeat;
}

.panel{
    margin-top:100px;
    border:2px solid #0A5A94;
    border-top:none;
    width:600px;
    height:500px;
    position:relative;
}
.title {
    width:200px;
    height:40px;
    line-height:40px;
    text-align:center;
    border:2px dotted #0A5A94;
    position:absolute;
    top:-20px;
    left:200px;
    border-radius:40px;
}

.line {
    position:absolute;
    top:0px;
    height:2px;
    background:#0A5A94;
}
.left-line{
    left:0px;
    width:200px;
}
.right-line{
    right:0px;
    width:198px;
}

演示地址:http://runjs.cn/detail/qysokudn

图片描述

最好的办法:告诉产品 框内背景设置为近似底图的默认背景/背景色

代码解决思路:外层虚线框div 包裹文字p p设置为不透明 因为你用了定位 所以在p上写俩个伪类把实线边框用近似背景色的直线遮盖掉 这样只有文字区域和1px的直线区域不能显示背景 虚线框内还有部分属于背景星空图

一般有设计图,中间的文字部分的背景在切图的时候就不要用透明的,直接截取覆盖部分背景的星空图案即可

设置 background,并且设置 position:relative,再设置一个比上层元素小的 z-index 就生效了

background-image: linear-gradient(to right, #fb3 40%, #58a 0,#58a 60%, #fb3 0);

参考地址

要写字的这块透明 但要不盖边框这绝对是不可能的

只能把头上这块 边框切出来当做背景 png透明背景 然后字定位上去

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题