1、今天做项目的时候,写着写着发现和UI给定的样式少了一个背景图,干脆就添加伪元素来实现,那如何让伪元素的层级比父级低呢。
HTML<div class="parent"></div>
css
.parent {
width: 98px;
height: 98px;
border-radius: 50%;
background:url('https://media.xiangshengclub.com/MTYyNTEyNjYzNjUwNSMxNjIjcG5n.png') left top/100% 100%; //头像框
}
.parent::after {
display: block;
content:'';
width: 98px;
height: 98px;
border-radius: 50%;
background:url('https://media.xiangshengclub.com/MTYyNTEyNjc0ODMzOCM0OTQjcG5n.png') left top/100% 100%; //头像
}
结果:头像框被头像给遮挡了。
(1)使用开启层级的方式:
.parent {
position: relative;
width: 98px;
height: 98px;
border-radius: 50%;
background:url('https://media.xiangshengclub.com/MTYyNTEyNjYzNjUwNSMxNjIjcG5n.png') left top/100% 100%;
}
.parent::after {
display: block;
position: absolute;
z-index:-1;
content:'';
width: 98px;
height: 98px;
border-radius: 50%;
background:url('https://media.xiangshengclub.com/MTYyNTEyNjc0ODMzOCM0OTQjcG5n.png') left top/100% 100%;
}
(2)使用transform:
.parent {
position: relative;
width: 98px;
height: 98px;
border-radius: 50%;
transform-style: preserve-3d;
background:url('https://media.xiangshengclub.com/MTYyNTEyNjYzNjUwNSMxNjIjcG5n.png') left top/100% 100%;
}
.parent::after {
display: block;
position: absolute;
z-index:-1;
content:'';
width: 98px;
height: 98px;
border-radius: 50%;
transform:translateZ(-1px);
background:url('https://media.xiangshengclub.com/MTYyNTEyNjc0ODMzOCM0OTQjcG5n.png') left top/100% 100%;
}
最终效果:
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。