Question

我有一个带有图片代码的网络应用程序，该图片代码具有css类，但没有 src 属性。像这样：

<img class="image"/>

css类只定义图像的url及其大小，但没有定义边框属性。问题是正在为图像仅在chrome浏览器中呈现白色边框（它在firefox和IE11中正常工作）。我试图通过css规则明确地删除它，但直到现在我不能。

解决方案是通过src属性设置图像的网址，但我有太多的图片从css规则中获取源代码。那么，有什么方法可以从css中删除那个白色边框？也许这是一个铬虫？

这个问题从几天前就发生在我身上。它似乎附带了Chrome的最新更新。

Here you have a jsfiddle to test what I say.

这里你直接有jsfiddle示例的相同代码片段：

body {
			background-color: brown;
			height: 100%;
			position: absolute;
			width: 100%;			
		}
		
		.image {
			background-image: url("http://www.ultimatedesignertoolkit.com/wp-content/uploads/2013/06/preview1.png");
			background-repeat: no-repeat;
			background-size: 600px 400px;
			content: '';
			display: inline-block;
			height: 400px;
			padding: 0;
			position: relative;
			top: 5px;
			vertical-align: top;
			width: 600px;
		}

<div>
    <img class="image"/>
</div>

Answer 1

请检查接受的答案：Removing default border around an image - Chrome browser

＆＃34; Chrome显示边框，因为它无法找到图像＆＃34;

Answer 2

为什么要将图片设置为img标记的背景？您应该使用src属性（需要具有有效的html）来定义图像网址。

<img class="image" src="http://www.ultimatedesignertoolkit.com/wp-content/uploads/2013/06/preview1.png"/>

如果出于某种原因无法做到这一点，请考虑使用div代替img来达到同样的效果。

<div class="image"></div>

Answer 3

这是因为您使用的img代码没有src属性。 Chrome基本上表示容器的大小，其中没有任何内容。

＆＃13;

body {
  background-color: brown;
  height: 100%;
  position: absolute;
  width: 100%;			
}
		
.img {
  background-repeat: no-repeat;
  background-size: 600px 400px;
  content: '';
  display: inline-block;
  height: 400px;
  padding: 0;
  position: relative;
  top: 5px;
  vertical-align: top;
  width: 600px;
}

＆＃13;

<div>
    <img src="http://www.ultimatedesignertoolkit.com/wp-content/uploads/2013/06/preview1.png"/>
</div>

＆＃13;

如何从chrome中删除图像边框？

3 个答案: