图片上有一个奇怪的图标和轮廓

Question

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

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 按钮，没有轮廓。

Answer 1

这有很多可能的原因，因此我将尝试对最可能的原因进行有根据的猜测。

我不知道你的文件相对于彼此的位置，但是你的标记和 CSS 的写法，文件 vcu.png 应该在 与 PHP 文件相同的文件夹 用于 <img> 标签（假定 index.php，地址栏中的 URL）上班。同样，它必须与 CSS 文件位于同一文件夹中，背景声明才能起作用。

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

When either the background:url line in style.css or the img tag in header.php is deleted, the image in the banner stops showing.

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

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

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

第一个产生更多的语义代码，这是我的偏好；但两者在常规浏览器中应该呈现相同。然而，删除 <img> 标签也会删除它的 alt 属性，因此依赖文本到语音系统的用户将无法知道 link 实际做了什么，因为唯一有意义的它将包含的内容是不间断的 space.

图片上有一个奇怪的图标和轮廓

Image has a weird icon and outline over it

html

css

image

hyperlink

photos