2021-07-05 每日一结

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%;
        }

最终效果：