我需要在屏幕顶部从头到尾放置一个大横幅。它必须是一个链接，并且横幅上有一张图片。我已经完成了所有设置和工作。但是，它周围都是一个灰色框，左上角是找不到图像时显示的图标。如何删除方框和图标？
标题.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">
我认为没有必要展示更多。
样式.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 按钮，没有轮廓。
最佳答案
这有很多可能的原因，因此我将尝试对最可能的原因进行有根据的猜测。
我不知道你的文件相对于彼此的位置，但你的标记和 CSS 的编写方式，文件 vcu.png对于 index.php，应与显示它的 PHP 文件位于同一文件夹(大概是 <img>，给定地址栏中的 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"或类似的位置)。然后设置<img>的样式用类似margin: 2px auto;的标签使图像居中并在顶部和底部为其留出几个像素的空间，并在 CSS 中删除背景声明。删除
<img>完全从您的 HTML 标记，将其替换为 (使包含<a>非空)，并将容器样式设置为display: block.
第一个产生更多的语义代码，这是我的偏好；但两者在常规浏览器中应该呈现相同。删除 <img>标签也删除了它的 alt属性，但是，因此依赖文本到语音系统的用户将无法知道该链接的实际作用，因为它包含的唯一有意义的内容是一个不间断的空格。
关于html - 图片上有一个奇怪的图标和轮廓，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38172960/