css背景图变圆

在网页中，我们经常需要使用背景图来美化页面布局。而有时候，我们需要将背景图变成圆形或者圆角矩形。下面我们就来讲解如何使用CSS来实现这个效果。

// 圆形背景图
.
round {
  background: url('bg.png') no-repeat center center / cover;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
// 圆角矩形背景图
.
round-rect {
  background: url('bg.png') no-repeat center center / cover;
  width: 200px;
  height: 200px;
  border-radius: 20px;
}
 

以上代码中，我们使用了CSS3中的border-radius属性来实现背景图变成圆形或圆角矩形。border-radius属性可以接受一个或多个值来指定四个角之间的圆角半径。当我们将border-radius的值设置为50%时，就可以得到一个圆形的背景图。

另外，我们还可以使用background-size属性来确保背景图始终覆盖整个容器，并保持其宽高比例。在上面的代码中，我们使用了'cover'关键字，代表让背景图保持其原始宽高比例并尽可能覆盖容器。

通过以上的CSS代码，我们可以轻松地将任何一个背景图变成圆形或圆角矩形，为网页布局增加更多的美感和个性化。