徽标不完整，背景图片

Question

我有一个带有background:url(/img/logo.png) center center no-repeat;的徽标

这是我的代码：

nav.navigation a.logo {
  width: 200px;
  height: 40px;
  display: inline-block;
  background: url(/img/logo.png) center center no-repeat;
  background-position-y: -13px;
  background-size: 100%;
  margin-top: 10px;
  margin-bottom: 9px;
  margin-left: -3%;
  float: left;
}

<a href="<?php echo base_url() ?>" class="logo"></a>

这是徽标的结果：

如您所见，圆圈未完全位于顶部

如何完整显示圆圈？

Answer 1

您的问题中缺少一些信息，但是我将尝试以一种通用的方式提供帮助，以查看您是否可以解决问题。

因为您将background-position设置为-3px，所以您的圆被切割了。删除它，它将不再被剪切。

我不知道您的图片规格。如果是200 x 40，则可以使用background-size: 100%。否则，您可能想要添加background-image: contain，以确保始终将其完整显示。

这是一个带有红色背景的示例，因此您可以分辨出div的位置以及非200x40px的图像。

nav.navigation a.logo {
  width: 200px;
  height: 40px;
  display: inline-block;
  background: red url(http://placekitten.com/g/350/250) center center no-repeat;
  background-size: contain;
  margin-bottom: 9px;
  margin-left: -3%;
  float: left;
}

<nav class="navigation"><a href="<?php echo base_url() ?>" class="logo"></a></nav>

这是具有200x40图片的版本。在这种特殊情况下，使用background-size: contain与100％完全一样。

nav.navigation a.logo {
  width: 200px;
  height: 40px;
  display: inline-block;
  background: red url(http://placekitten.com/g/200/40) center center no-repeat;
  background-size: contain;
  margin-bottom: 9px;
  margin-left: -3%;
  float: left;
}

<nav class="navigation"><a href="<?php echo base_url() ?>" class="logo"></a></nav>

更新：我将做出另一个大胆的猜测，并说您的徽标不在最顶部的原因是因为您需要删除margin-top: 10px;。放手，让我们知道。

Answer 2

这似乎对我有用。

我必须删除空白-3％和背景-13px

 a.logo {
  width: 200px;
  height: 40px;
  display: inline-block;
  background: url(https://imgplaceholder.com/100x20) center center no-repeat;
  background-size: 100%;
  margin-top: 10px;
  margin-bottom: 9px;
  float: left;
  border:1px solid blue;
}

<a href="#" class="logo">logo</a>

Answer 3

您需要删除background-position-y: -13px;，因为它无效， 对于圈子，请尝试查找其他元素是否将徽标图片隐藏在顶部

a.logo {
  width: 200px;
  height: 40px;
  display: inline-block;
  background: url(http://via.placeholder.com/350x150) center center no-repeat;
  background-size: 100%;
  margin-top: 10px;
  margin-bottom: 9px;
  float: left;
}

<a href="#" class="logo"></a>