圆形背景图片 CSS

在网页设计中，背景图片是一个强有力的工具，可以让网站更生动有趣。其中，圆形背景图片是一种常见的设计方式，可以让网站更加美观。

实现方式

可以使用 CSS 的 border-radius 属性来实现圆形背景图片，同时使用 background-image 属性设置背景图片。

.round-image {
  background-image: url("image.jpg");
  background-size: cover;
  background-position: center;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

上述代码会将一个 200px x 200px 的元素设置成圆形，背景图片会填满整个元素并居中显示。

背景图片适应元素大小

使用 background-size 属性可以控制背景图片适应元素大小。默认情况下，背景图片会按原尺寸显示。需要先将 background-size 设置为 cover、contain、100% 等值。

.round-image {
  background-image: url("image.jpg");
  background-size: cover;
  background-position: center;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

• cover: 背景图片会等比例缩放，填满整个元素，可能会有些部分被裁剪。
• contain: 背景图片会等比例缩放，适应元素大小，可能会留白。

背景图片位置

使用 background-position 属性可以设置背景图片的位置。默认情况下，背景图片在元素的左上角开始显示。可以使用指定的长度或者百分数值来调整位置。

.round-image {
  background-image: url("image.jpg");
  background-size: cover;
  /*将背景图片向下平移50%*/
  background-position: center 50%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

总结

使用 border-radius、background-image、background-size 和 background-position 属性，可以轻松实现圆形背景图片效果。在其他样式上也可以灵活运用，例如结合动画效果实现更加炫酷的设计风格。