开头介绍
今天面试遇到一道比较偏门的面试题目,这里分享一下.
问的是在div标签里面有一个p标签,在设定div背景的时候如何不改变p标签的背景.
p标签虽然是一个块级元素,但是在已设定父元素背景情况下是可以影响到其内层元素的.
我当时想的是利用层级堆叠顺序(z-index)去处理,不过证明是没有效的.因为堆叠顺序只能引用在相同层级的元素上,题目里的p已经在div里面所以无论如何p都是低于div的层级.
思考一段时间面试官给的答案是利用rgba去处理,我当时觉得似乎不对的,rgba只是处理颜色以及透明度,跟p的背景应该是不关联的,决定回去后尝试一下.
这里回家后测试了一下.rgba确实跟背景不相关.只有直接改变p元素里面的背景色才可以实现改需求.
后面猜测了一下问的可能是里面的字体不因div的透明度改变而改变把,这里把几个demo写了一下.
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
47
48
49
50
| <style>
.container {
width: 100px;
height: 100px;
}
p {
width: 50px;
height: 50px;
}
.default {
background: rgba(255, 0, 0, 0.4);
}
.default p {
background: blue;
}
.rgba-normal {
background: rgba(255, 0, 0, 0.4);
}
.rgba {
background: rgba(255, 0, 0, 0.4);
}
.opacity {
background: rgb(255, 0, 0);
opacity: 0.4;
}
</style>
<body>
<div class="container default">
<p>this is a paragraph</p>
</div>
<div class="container rgba-normal">
<p>this is a use rgba</p>
</div>
<div class="container rgba">
<p>this is use rgba transparent</p>
</div>
<div class="container opacity">
<p>this is use opacity transparent</p>
</div>
</body>
|
