在引导程序中删除标题图像中的细线 [英] remove the thin line in header images in bootstrap

问题描述

我在标头/菜单中具有带有引导程序和svg sprit的基本代码..图标中有一条细的灰色背景线。

I have basic code with bootstrap and a svg sprit in a header / menu.. and there is a thin gray background line in the icons.

http：// codepen。 io / anon / pen / dpzKoQ？editors = 1100

请帮忙。我尝试将

border- *等设置为0-我可以解决。我设置了颜色/背景-但在某些地方我缺少了一些东西。

border-* etc to 0 - and I can fix. I set the colors / background - but some place I am missing something.

在某些地方，它从normalize.less中获得了以下值

some place it is getting the below value from normalize.less

border-image-width：1;

border-image-width: 1 ;

code：请参阅codepen。

code: please see codepen.

    .icon {
  display: inline-block;
  background-repeat: no-repeat;
  background-image: url(https://cdn.rawgit.com/srisitar/test/master/sprite.svg);
}

.icon-facebook {
  width: 96px;
  height: 96px;
  background-position: 0 0;
}

.icon-twitter {
  width: 96px;
  height: 96px;
  background-position: -128px 0;
}

<

div id="home">
       <a href=" ">
                  <img class="icon icon-twitter"></a>
                                                </div>

如何删除灰线。

谢谢

推荐答案

这是因为您使用的 img 标签没有 src 属性。 Chrome本质上是在指示没有任何内容的容器的大小。

It's because you are using an img tag with no src attribute. Chrome is essentially indicating the size of the container with nothing in it.

如果您不想在锚标签之间放置图片，请不要使用图片标签。

If you don't want to place an image between the anchor tags, then don't use an image tag. It's not necessary to place anything between the tags.

演示在这里。

这篇关于在引导程序中删除标题图像中的细线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！