如何删除背景图像周围的灰色边框？

Question

我在下面的代码行中遇到了一个有趣的问题:

  <img style="background-image:url(Resources/bar.png); width: 300px; height: 50px;"/>

在Safari(至少)中,300x50px区域周围有灰色边框.添加style ="border:none;" 不会删除它.有任何想法吗？

谢谢.麦克风

Answer 1

因此,您有一个没有src属性的img元素,但它确实应用了背景图像样式.

如果您指定了src属性,我会说灰色边框是图像所在位置的"占位符".

如果你不想要一个'前景'图像,那么不要使用img标签 - 你已经说过改用div可以解决这个问题,为什么不用这个解决方案呢？

Answer 2

您还可以添加空白图像作为占位符:

img.src='data:image/png;base64,R0lGODlhFAAUAIAAAP///wAAACH5BAEAAAAALAAAAAAUABQAAAIRhI+py+0Po5y02ouz3rz7rxUAOw=='

这应该做的伎俩!

Answer 3

实际上,这似乎至少在Chrome上有效:

img {
 content: "";
}

Answer 4

下面将使用css将src设置为一个微小的透明图像,它解决了src属性问题,同时保持了对图像的控制:

content:url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7')

我的整体方法是在我的reset.css中定义以下内容,然后使用类来提供实际图像并对其进行控制.这个行为就像一个img,但完全是css控制的.

img {
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  display: inline-block;
  *display: inline;
  vertical-align: middle;
  *
  vertical-align: auto;
  font: 0/0 serif;
  text-shadow: none;
  color: transparent;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  box-sizing: border-box;
}

img:not([src]) {
    content:             url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
}

.myuniqueimage {
    background-image: url('../images/foobar.png');
    height: 240px;
}

感谢+ programming_historian和+ binnyb的数据:图片提示