css样式标题类

Question

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

Answer 1

看代码吧
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

Answer 2

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

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

Answer 3

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

Answer 4

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

Answer 5

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

参考地址

Answer 6

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

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