Блог

Главная - Вопросы по программированию - как вы добавляете изображение аватара в качестве фонового изображения в этот анимированный раздел?

как вы добавляете изображение аватара в качестве фонового изображения в этот анимированный раздел?

#css #animation #rotation #background-image #linear-gradients

#CSS #Анимация #вращение #фоновое изображение #линейные градиенты

Вопрос:

Я хочу добавить свой аватар в этот круглый div, в котором есть анимация вращения. Я хочу, чтобы мой аватар мог поместиться в этот контейнер круга. Я сделал это как фоновое изображение, но у меня возникла эта проблема:

аватар-контейнер

 lt;div className = 'avatar-container'gt; lt;/divgt;   .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%; }

Комментарии:

1. В чем проблема? У нас нет доступа к вашему аватару, поэтому не вижу никаких проблем.

Ответ №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%; } 
 lt;!DOCTYPE htmlgt; lt;htmlgt;  lt;headgt;  lt;meta charset="UTF-8"gt;  lt;meta name="viewport"  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" /gt;   lt;/headgt;  lt;bodygt;   lt;div class = 'avatar-container'gt;  lt;/divgt;  lt;/bodygt;     lt;/htmlgt;

Комментарии:

1. Большое вам спасибо, это было очень полезно, и это сработало

Метки: