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的数据：图片提示

Answer 5

尝试<img border="0" />

这应该可以解决问题。

修改

很抱歉，我发现你做的事情非常错误......你正在img标签上设置一个背景图片..这真的没有意义......

而不是图片标签使用

<div style="background-image: url(Resources/bar.png);"></div>

或者如果它是您在该区域中想要的图像，请使用

<img src="Resources/bar.png" border="0" Width="500px" Height="300" />

Answer 6

img标签需要src属性。

如，

<img src="Resources/bar.png" alt="bar" width="300" height="50" />

但img仅适用于内联（前景）图像。如果你真的希望图像是某种东西的背景，你需要将样式应用到你希望它作为背景的实际元素：

<div style="background-image:url(Resources/bar.png);">...</div>

Answer 7

尝试将边框设置为0px？

编辑：是的，你打算在另一堂课的css中有背景图片。在div或body标签中执行此操作（取决于您尝试执行的操作）将起作用。它还会阻止背景图像本身成为一个元素，这会使页面上的元素流动变得混乱并使您的定位变得混乱。

<div class="myDivClass">content to go on TOP of the background image</div>

CSS：

.myDiVClass
{
background: url(Resources/bar.png)  no-repeat;
width: 300px; 
height: 50px;
}

或

 <div class="myDivClass" style="background: url(Resources/bar.png)  no-repeat; width: 300px; height: 50px;">content to go on TOP of the background image</div>

最好保持CSS分离，否则会破坏部分要点。

Answer 8

我有一个类似的问题，我的初始HTML有一个没有来源的IMAGE标签。我的Javascript确定了要显示的图像。但是，在加载图像之前，用户看到了占位符框。

<img id="myImage">

我的解决方法是将初始图片代码CSS更新为

#myImage {
  display:none;
}

然后使用JQuery在其内容加载后显示它。

$('#myImage')
.attr('src', "/img/" + dynamicImage + '.png')
.fadeTo(500, 1);

Answer 9

尝试设置此项而不是背景图像：

background: url(Resources/bar.png) no-repeat;

Answer 10

如果仅在Safari中发生，而不是在其他浏览器中尝试使用类似YUI CSS RESET

的内容重置浏览器CSS

将css与代码分开并为图像设置CSS类的正确方法。

<img src='whatever.png' alt='whatever' class='className' />

并在css中定义className的外观。，className {border：0;}

Answer 11

尝试这个，它对我有用（在chrome和Safari上）。这不是边界而是阴影，所以请将此行添加到标记：

{-webkit-box-shadow:none;}

希望它也适合你。

Answer 12

我知道这是一个老问题，但我觉得这很有用..

如果您的Resources/bar.png是精灵形式的前景图片，则使用img标记而不是div是有意义的。执行此操作时，可以使用1px透明图像文件（用于src属性），然后像在此处设置背景图像，例如。

    <img src="transparent.png" style="background: url(sprite.png) x y" />

在此，您将x和y设置为您希望图像开始的精灵上的像素位置。此技术也在http://www.w3schools.com/css/css_image_sprites.asp

中解释

当然，这样做的另一个缺点就是有一个额外的请求，但是你总是使用相同的透明图像为你精灵这不是一个大问题。

Answer 13

如果在CSS中用作背景图像，则正方形会消失

，将空的 src =“” 添加到图像组件中

<image class=${styles.moneyIcon} src="" ></image>

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

13 个答案: