2021-07-05每日总结
时间：2023-03-30 23:05:53
CSS
1.今天在做项目的时候，发现UI给的样式缺少背景图，于是索性加了个伪元素来实现。如何让伪元素层次低于父级。HTML
css.parent{width:98px;高度：98px；边界半径：50%；background:url('https://media.xiangshengclub.com/MTYyNTEyNjYzNjUwNSMxNjIjcG5n.png')lefttop/100%100%;//头像框架}.parent::after{display:block;内容：'';宽度：98px；高度：98px；边界半径：50%；background:url('https://media.xiangshengclub.com/MTYyNTEyNjc0ODMzOCM0OTQjcG5n.png')lefttop/100%100%;//头像}结果：头像框被头像挡住。（1）使用开启层的方式：.parent{position:relative;宽度：98px；高度：98px；边界半径：50%；background:url('https://media.xiangshengclub.com/MTYyNTEyNjYzNjUwNSMxNjIjcG5n.png')lefttop/100%100%;}.parent::after{显示：块；位置：绝对；z-指数：-1；内容：'';宽度：98px；高度：98px；边界半径：50%；background:url('https://media.xiangshengclub.com/MTYyNTEyNjc0ODMzOCM0OTQjcG5n.png')lefttop/100%100%;}（2）使用transform：.parent{position:relative;宽度：98px；高度：98px；边界半径：50%；变换样式：保留3d；background:url('https://media.xiangshengclub.com/MTYyNTEyNjYzNjUwNSMxNjIjcG5n.png')lefttop/100%100%;}.parent::after{显示：块；位置：绝对；z-指数：-1；内容：'';宽度：98px；高度：98px；边界半径：50%；变换：平移Z（-1px）；background:url('https://media.xiangshengclub.com/MTYyNTEyNjc0ODMzOCM0OTQjcG5n.png')lefttop/100%100%;}最终效果：
