你如何在这个动画 div 中添加头像图像作为背景图像？答案

【问题标题】：how do you add avatar image as background image in this animated div?你如何在这个动画 div 中添加头像图像作为背景图像？
【发布时间】：2022-01-10 01:29:11
【问题描述】：

我想在这个有一些旋转动画的圆形 div 中添加我的头像。我希望能够将我的头像放入这个圆形容器中。我把它作为背景图像，但我遇到了这个问题：

<div className = 'avatar-container'>
</div>


.avatar-container{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background: white;
    background-size: cover;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    overflow: hidden;
}


.avatar-container::before{
    position: absolute;
    width: 150%;
    height: 150%;
    border-radius: 50%;
    background: conic-gradient(from 90deg, rgb(0 0 0 / 0%) 70%, rgb(11 78 230/ 9%) 80%, rgb(0 220 255) 100%);
    content: '';
    left: -25%;
    top: -25%;
    animation: rotate 2s infinite linear;

}

.avatar-container::after{
    position: absolute;
    width: 94%;
    height: 94%;
    border-radius: 50%;
    background-image: url('./avatar.jpeg');
    content: '';
    top: 3%;
    left: 3%;
}

【问题讨论】：

有什么问题？我们无权访问您的头像，因此看不到任何问题。

标签： css animation rotation background-image linear-gradients

【解决方案1】：

你能把background-size: cover;加到avatar-container::after吗

.avatar-container{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background: white;
    background-size: cover;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    overflow: hidden;

}


.avatar-container::before{
    position: absolute;
    width: 150%;
    height: 150%;
    border-radius: 50%;
    background: conic-gradient(from 90deg, rgb(0 0 0 / 0%) 70%, rgb(11 78 230/ 9%) 80%, rgb(0 220 255) 100%);
    content: '';
    left: -25%;
    top: -25%;
    animation: rotate 2s infinite linear;

}

.avatar-container::after{
    position: absolute;
    width: 94%;
    height: 94%;
    border-radius: 50%;
    background-image: url('https://i.stack.imgur.com/2nnhI.jpg');
    background-size: cover;
    content: '';
    top: 3%;
    left: 3%;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />


</head>

<body>

  <div class = 'avatar-container'>
  </div>

</body>




</html>

【讨论】：

非常感谢，这非常有帮助，而且很有效