图像上有一个奇怪的图标和轮廓答案

【问题标题】：Image has a weird icon and outline over it图像上有一个奇怪的图标和轮廓
【发布时间】：2016-11-05 11:48:24
【问题描述】：

我需要在屏幕顶部从头到尾放置一个大横幅。它必须是一个链接，并且在横幅上是一个图像。我已经完成了所有设置和工作。但是，它周围是一个灰色框，左上角是未找到图像时显示的图标。如何删除框和图标？

header.php

<body <?php body_class(); ?>>

<a class="vcuLink" href="http://www.vcu.edu/" >
    <div id="topBanner" class="vcuBanner">
        <img class="vcuLogo" src="vcu.png" width="910" height="59">
    </div>
</a>

<div id="page" class="site">
    <div class="site-inner">

我认为没有必要展示更多。

style.css

.vcuBanner {
    position: relative;
    background-color: black;
    z-index: 100;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 62px;
    top=0;
}

.vcuLogo {
    position: relative;
    background:url(vcu.png)no-repeat center;
    height: inherit;
    width: inherit;
    z-index: 101;
}

编辑：更多信息和屏幕截图。

当 style.css 中的 background:url 行或 header.php 中的 img 标签被删除时，横幅中的图像将停止显示。但是，当 img 标签出现时，奇怪的图标和轮廓也会出现，让我相信 img 标签是罪魁祸首。

截图：

在最顶部的 VCU 横幅中，您可以看到我在说什么。在 Internet Explorer 中，左上角的图标是一个 X 按钮，并且没有轮廓。

【问题讨论】：

为什么将PNG文件作为图像和图像的背景图像？那有什么意义呢？您在背景声明中的右括号后还缺少一个空格，并且横幅的“顶部”声明是 HTML，而不是 CSS。这可能是问题的一部分。
@JanusBahsJacquet 我在这两个地方都有图像，因为无论出于何种原因，当我从任一位置删除 PNG 文件时，它都会停止显示。在后台声明中缺少空格是什么意思？多亏了'top'，我删除了它。
url 的右括号和单词“no-repeat”之间应该有一个空格。我猜这会使 url 无效并且浏览器会忽略整行（或误解路径并且无法加载图像）。您是否尝试过使用浏览器检查器查看实际显示的内容？另外，请附上屏幕截图（或链接），以便我们准确了解它的外观。
@JanusBahsJacquet 我添加了截图和一些额外信息的编辑。在背景 url 之后添加空格并没有改变 Chrome 上的任何内容。感谢大家的帮助！

标签： html css image hyperlink photos

【解决方案1】：

这有很多可能的原因，所以我将尝试有根据地猜测最可能的原因。

我不知道您的文件相对于彼此的位置，但是您的标记和 CSS 的编写方式，文件 vcu.png 应该与 PHP 位于 同一文件夹显示它的文件（大概是index.php，给定地址栏中的URL）以使<img>标签起作用。同样，它必须与 CSS 文件位于同一文件夹中才能使背景声明起作用。

由于<img> 标签本身的位置没有在您的 CSS 中指定，它应该显示在容器的左上角。背景图像居中，所以它应该显示在中心。鉴于中间有一个图像，而左侧有一个缺失的图像图标，似乎是 HTML <img> 标记指向一个不存在的文件。这反过来意味着 PNG 文件与 CSS 文件位于同一文件夹中，但与 PHP 文件位于不同的文件夹中。也许 CSS 和 PNG 文件位于名为 style 或类似名称的子文件夹中？

当 style.css 中的 background:url 行或 header.php 中的 img 标签被删除时，横幅中的图像将停止显示。

这是有道理的。由于 CSS 定义的背景是在 image 标签上声明的（不是包含 <a> 或 <div>），从 HTML 标记中删除标签自然也会删除背景图像。反之，由于 HTML 标签指向的路径不正确，因此存在标签也意味着会丢失图像图标。

您可以通过两种简单的方式解决此问题：

找出图像相对于index.php 文件的位置，并确保指向正确的位置（可能是src="style/vcu.png" 或类似的位置）。然后将<img> 标记设置为margin: 2px auto; 之类的样式，以使图像居中并在顶部和底部留出几个像素的空间，并去掉CSS 中的背景声明。
从 HTML 中完全删除 <img> 标记，将其替换为 &nbsp;（使包含的 <a> 非空），并将容器样式设置为 display: block。

第一个产生更多语义代码，是我的偏好；但两者都应该在常规浏览器中呈现相同的内容。但是，删除<img> 标签也会删除其alt 属性，因此依赖文本转语音系统的用户将无法知道该链接的实际作用，因为它将包含的唯一有意义的内容是非打破空间。

【讨论】：