开头介绍
今天面试遇到一道比较偏门的面试题目,这里分享一下.
问的是在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>
|