css 背景图片圆弧 |ie8css兼容css写法

border-radius:50%;
background-image:url('xxx.png');
background-size:cover;

其中，border-radius:50%;将元素的边框半径设置为50%，使其呈现圆形；background-image: url('xxx.png');指定元素的背景图片；background-size:cover;将背景图片等比缩放至完全覆盖元素，并自动裁剪多余部分。

例如，大家想要将div元素的背景图片设为一个圆形头像，可以这样写：

<div class="avatar"></div>
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
background-image: url('avatar.png');
background-size: cover;
}

上述代码中，大家使用了一个类名为avatar的div元素作为头像容器，并在其中编写了CSS样式。通过设置width和height属性，大家指定元素的宽度和高度为100像素，并将边框半径设为50%，实现了圆形效果。背景图片则使用background-image:url('avatar.png')指定，同时使用background-size:cover;缩放和裁剪图片，使其符合圆形容器的大小和形状要求。

通过CSS的背景图片裁剪属性，大家可以轻松地实现圆弧形状的背景图片，为网页添加美观性和用户体验提升。需要注意的是，裁剪后的背景图片可能会失去原来的比例和细节，因此大家需要在使用前先进行适当的调整和处理，以达到最佳效果。