时间戳

首页 > 解决方案 > 标志未满，背景图片

html - 标志未满，背景图片

问题描述

我有一个标志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>

这是 logo 的结果：

在此处输入图像描述

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

如何完全显示圆圈？

标签： htmlcssbackground-image

解决方案

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

你的圈子被剪掉了，因为你把 设置background-position为-3px。删除它，它将不再被切割。

我不知道你的图像的规格。如果是 200 x 40，那么使用background-size: 100%. 否则，您可能需要添加background-image: contain, 以确保它始终完全显示。

这是一个带有红色背景的示例，因此您可以知道 div 的位置，以及不是 200x40 像素的图像。

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;. 试一试，让我们知道。

推荐阅读