如何从图像中删除默认边框/轮廓答案

【问题标题】：how to remove default border/outline from image如何从图像中删除默认边框/轮廓
【发布时间】：2022-02-01 16:14:37
【问题描述】：

大家好，我想知道如何从图像标签中删除边框/轮廓，包括我没有在其中使用图像，例如test code fiddle

HTML

<img src="" class="testClass">

CSS

.testClass{
    width: 100%;
    margin-left: 0%;
    height: 150px;
    border: 0px;
    outline : none;
}

【问题讨论】：

标签： html image

【解决方案1】：

您在那里看到的是浏览器的“损坏的图像 URL”图像。这就是浏览器无法加载图像时得到的结果。它没有边界；浏览器只是渲染一些东西，所以你可以看到丢失的图像有多大。因此，CSS 对结果影响不大。

您可以设置display: none 以完全隐藏图像。如果您希望空间为空，请将其包裹在相同大小的div 中。

【讨论】：

我必须动态添加图片源，所以我必须强制将img标签放在那里
@vishal - 如果 img 没有图像路径，您可以使用 img[src=""] { display: none } (IE 8 +) Example here 完全删除图像
@vishal：试试这个：放一个空的 DIV 并动态创建整个 img 元素。

【解决方案2】：

Display none 会删除图像，因此会破坏其占用的空间，不利于布局。此外，它还会导致带有区域的地图无法访问。我使用空图像为一些底层元素创建一些可点击区域，所以我不想要图像。唯一可行的选项是将不透明度设置为 0。

【讨论】：