[分享]css中怎么将背景图片设置成圆形

在CSS中，我们可以利用borderradius属性来将元素的边角设置成圆形，但如何将背景图片也设置成圆形呢？本篇文章将详细介绍一下如何实现这一效果。首先，我们需要把需要设置成圆形背景图片的元素的宽高...

在CSS中，我们可以利用border-radius属性来将元素的边角设置成圆形，但如何将背景图片也设置成圆形呢？本篇文章将详细介绍一下如何实现这一效果。

首先，我们需要把需要设置成圆形背景图片的元素的宽高设置成相同的值，这样才能保证圆形的效果。然后，我们可以利用background-size属性将背景图片铺满该元素。最后，结合border-radius属性设置边角为50%，即可实现圆形背景图片。

.circle {
  width: 200px;
  height: 200px;
  background-image: url("xxx.png");
  background-size: cover;
  border-radius: 50%;
} 

需要注意的是，background-size: cover可以让图片铺满元素，但是如果图片的宽高比与元素的宽高比不一致，就会有部分图片裁剪掉。如果您不希望出现这种情况，可以使用background-size: contain代替。

总结来说，将背景图片设置成圆形需要将元素的宽高设置成一致，并利用border-radius属性将边角设置成50%即可实现。如果您希望图片完全显示，可以使用background-size: contain。