仿微博半透明边框

来源：互联网发布：dw格式化js代码编辑：程序博客网时间：2024/05/19 23:56

仿微博半透明边框

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <style type="text/css">
        body {
            background:blue;
        }
        #box {
            width:300px;
            padding:5px;
     
            position:relative;
        }
        #alpha_bg {
            background:#f2f2f2;
            width:100%;
            height:100%;
            opacity:0.3;
             
            position:absolute;
            top:0;
            left:0;
             
            -webkit-border-radius:4px;
            -moz-border-radius:4px;
            border-radius:4px;
        }
        #content {
            border:1px solid #bbb;
            background:#fff;
            padding:10px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="alpha_bg"></div>
        <div id="content">内容区</div>
    </div>
</body>
</html>

我的思路是这样的，#box先相对定位，以便#alpha_bg可以绝对定位，但你会发现，这样做有个问题，好像整个box都无法选择文本了。

原因就是#alpha_bg位于#content之上，至于为什么跑到它上面去了，我也不甚清楚，希望高人指点一二。

解决办法很简单，既然是层级问题，自然用到z-index，但这个属性有个前提，目标元素必须设置了position: relative/absolute/fixed三者之一，即不能是默认值就行。

最终版

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <style type="text/css">
        body {
            background:blue;
        }
        #box {
            width:300px;
            padding:5px;
     
            position:relative;
        }
        #alpha_bg {
            background:#f2f2f2;
            width:100%;
            height:100%;
            opacity:0.3;
             
            position:absolute;
            top:0;
            left:0;
            z-index:0;
             
            -webkit-border-radius:4px;
            -moz-border-radius:4px;
            border-radius:4px;
        }
        #content {
            border:1px solid #bbb;
            background:#fff;
            padding:10px;
             
            position:relative;
            z-index:2;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="alpha_bg"></div>
        <div id="content">内容区</div>
    </div>
</body>
</html>

这只是一种方式，还有一种是div外套一层div，外层div设置半透明圆角背景，再给个padding就哦了