在圈子里面的播种的和被集中的背景图象

Question

我想裁剪此image并将其设置为锚标记的background-image这是一个圆圈，我该怎么做？

a {
  display: inline-block;
  width: 100px;
  height: 100px;
  color: #000;
  border: 1px solid black;
  border-radius: 50%;
  box-shadow: 0 0 4px black;
  text-align: center;
  line-height: 100px;
  text-decoration: none;
}

a:hover {
  background: #ffff99;
  border-color: white;
}

<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Products</a>
<a href="#">Contact</a>

Answer 1

您可以使用background-position来定位背景和background-size（虽然IE8中没有支持）来缩放背景：

a {
  background-image: url("http://www.kruger-us-targets.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/1/3/1300_p.png");
  background-position: center;
  background-size: 190%;
  display: inline-block;
  width: 100px;
  height: 100px;
  color: #fff;
  border: 1px solid black;
  border-radius: 50%;
  box-shadow: 0 0 4px black;
  text-align: center;
  line-height: 100px;
  text-decoration: none;
}

a:hover {
  color: #000;
  background: #ffff99;
  border-color: white;
}

<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Products</a>
<a href="#">Contact</a>