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

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

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

在Safari（至少）中，300x50px区域周围有灰色边界。添加style=“border:none；”不会将其删除。有什么想法吗

谢谢。

---

Mike尝试将边框设置为0px

编辑：是的，在另一个类的css中有背景图像。在div或body标签中执行（取决于您尝试执行的操作）将有效。它还阻止了背景图像本身就是一个元素，这会扰乱页面上元素的流动，扰乱你的定位

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

或

要放在背景图像顶部的内容

---

最好保持CSS的独立性，否则会破坏部分要点

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

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

试试

---

如果只在Safari中发生，而不在其他浏览器中发生，请尝试使用以下方法重置浏览器CSS

正确的方法是将css与代码分开，并为图像创建一个css类

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

并在css中定义类名的外观。

---

，className{border:0；}

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

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

---

如果您不想要“前景”图像，那么就不要使用img标记-您已经说过，更改为div可以解决问题，为什么不使用该解决方案呢？

img标记需要src属性

e、 g

但img仅适用于内联（前景）图像。如果您确实希望图像成为某物的背景，则需要将样式应用于希望其成为背景的实际元素：

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

。。。

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

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

---

这应该能奏效

试试这个，它对我很有用（在chrome和Safari上）。这不是边框，而是阴影，因此请将这一行添加到标记中：

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

---

我知道这是一个老问题，但我发现这很有用

如果

Resources/bar.png

是精灵形式的前景图像，那么使用

img

标记而不是

div

是有意义的。执行此操作时，可以使用1px透明图像文件，用于

src

属性，然后按照此处的操作设置背景图像，例如

{-webkit-box-shadow:none;}

在这里，您将

x

和

y

设置为希望图像开始的精灵上的像素位置。这项技术也在以下章节中进行了说明：

---

当然，这样做的缺点是有一个额外的要求，但如果你总是为你的精灵使用相同的透明图像，那么这并不是一件大事。

实际上，这似乎至少在Chrome上起作用：

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

---

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

img {
 content: "";
}

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

---

以下内容将使用css将src设置为一个微小的透明图像，从而解决src属性问题，同时保持对图像的控制：

content:url（'data:image/gif；base64，r0lgodlhaqabaaaaaaap///yh5baeaaaaaaaaaaaaaaaaaaaaaaaaaaaa7'）

我的总体方法是在reset.css中定义以下内容，然后使用类提供实际图像并控制它。这就像一个img，但完全由css控制

<img id="myImage">

感谢+programming_historian和+binnyb提供的数据：图像提示

在图像组件中添加一个空的src=“”，如果您将其用作css中的背景图像，则方形将消失

#myImage {
  display:none;
}

是。不起作用。它看起来像一个边界，但它看起来像其他东西。不起作用。如果我用div标记替换img标记，边框就不会出现……这就是应该怎么做的吗？是否使用javascript动态更改页面的css？napster是正确的。你做错了。背景是图像的css属性。请看我的示例，从css技巧中获得正确的图像参数，1x1 base 64 transparent img

src=“data:image/gif；base64，r0lgodlhaqabaaaaaaaaap///yh5baeaaaaaaaaaaaaaaaaaaaaaaibraa7”

浏览器在不显示

src

时自动添加这些边框@neaumusic你的技巧让我又省了一个小时的工作。我没有检查其他浏览器，但我想我只需要使用div标签。这就解决了问题，但我认为应该使用img标签……正确。我想就是这样。我已经用div修复了它。我没有意识到img标签只用于前景图像。但是，是的，就我所知，这就是答案。很高兴，我可以帮忙-你有没有可能把我的答案标记为被接受的答案？很遗憾，CSS3强迫用户使用这个丑陋的默认边界。这就是为什么我尽量避免使用糟糕的预制标记，如“img”。HTML应该是描述性的，如果你想用CSS管理你的图像，你不应该更改你的HTML…有一个解决方案类，当添加属性alt和src empty时，灰色边框将消失。这就做到了（连同

display:inline block

一起保留尺寸），但即使源图像没有损坏，它也会保留空图像…您的组合答案是Chrome的解决方案。然而，FF中不仅有边框，还有损坏的图像图标。兼容性…：-（对于Chome 59，两者的边界仍然显示，但是src='data:image/png；base64，r0lgodlhfaaaiaaap///waaach5baeaaaaaaaaaauabqaaairhi+py+0Po5y02ouz3rz7rxUAOw==''hack仍然修复了它。或者一个更小的图像（GIF而不是png）：

对我有效，谢谢！但是@binnyb的GIF建议不起作用

img {
 content: "";
}

<img id="myImage">

#myImage {
  display:none;
}

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

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;
}

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