Question

无论我尝试多少值，我都无法使用此社交精灵。图片为700 x 400像素

Html看起来像

＆＃13;

.social a {
  transition: 0.5s;
  width: 32px;
  height: 32px;
  margin: 10px;
  display: block;
  text-indent: 20000px;
  border-radius: 50%;
  background-image: url(https://i.gyazo.com/f24952f2c3460c6851a108b4f98cee68.jpg)
}

#facebook {
  background-position:
}

＆＃13;

<div class="social">
  <a href="http://instagram.com/anotoriousgummy" target="_blank" id="instagram"> Instagram </a>
  <a href="http://facebook.com/GummyGod" target="_blank" id="facebook"> Facebook </a>

＆＃13;

图片：https://i.gyazo.com/f24952f2c3460c6851a108b4f98cee68.jpg

Answer 1

您使用的是700 x 400像素的图片，与32 x 32像素的锚标签相比非常大，您希望在其中放入社交图标。因此，您需要编辑700的背景大小x 400像素图像。

之后，您可以找到您要查找的图标的背景位置。

我根据您的使用情况对您的小提琴做了一些小改动。

我的代码段如下：

.social {
  
  display: -webkit-inline-box;
}

.social a {
  transition: 0.5s;
  width: 35px;
  height: 35px;
  margin: 10px;
  display: block;
  text-indent: 20000px;
  border-radius: 50%;
  background-size: 250px;
  background-image: url(https://i.gyazo.com/f24952f2c3460c6851a108b4f98cee68.jpg)
}

#facebook{
  
  background-position: -1px 107px;
}

#instagram{
  
  background-position: 145px 107px;
}

<div class="social">
  <a href="http://instagram.com/anotoriousgummy" target="_blank" id="instagram"> Instagram </a>
  <a href="http://facebook.com/GummyGod" target="_blank" id="facebook"> Facebook </a>
</div>

社交精灵不起作用

1 个答案: