html - 图像上有一个奇怪的图标并在其上勾勒出轮廓

原文 标签 html css image hyperlink photos

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

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标签是罪魁祸首。

屏幕截图:
enter image description here

在最顶部的VCU标语中,您可以看到我在说什么。在Internet Explorer中,左上方的图标是X按钮,并且没有轮廓。

最佳答案

造成这种情况的原因很多,因此,我将对最有可能是什么的原因进行有根据的猜测。

我不知道您的文件之间的相对位置,但是在这里编写标记和CSS的方式中,文件vcu.png应该与显示文件的PHP文件位于同一文件夹中(大概是< cc>(在您的地址栏中输入URL),index.php标记即可正常工作。同样,它必须与CSS文件位于同一文件夹中,以便后台声明起作用。

由于<img>标记本身的位置未在CSS中指定,因此它应显示在容器的左上角。背景图像居中,因此应显示在中央。假设在中心有一个图像,在左侧有一个丢失的图像图标,则似乎是HTML <img>标记指向了不存在的文件。这意味着PNG文件与CSS文件位于同一文件夹中,但与PHP文件位于不同的文件夹中。也许CSS和PNG文件位于名为<img>的子文件夹中?


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


这是有道理的。由于CSS定义的背景是在图片标签(不是包含style<a>)上声明的,因此从HTML标记中删除该标签自然也会删除背景图片。相反,由于HTML标签指向的路径不正确,因此在其中放置标签也意味着将缺少图像图标。

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


找出图像相对于您的<div>文件的位置,并确保您指向正确的位置(也许index.php或类似的名称)。然后使用src="style/vcu.png"之类的样式设置<img>标记的样式,以使图像居中,并在顶部和底部给其几个像素像素的空间,并摆脱CSS中的背景声明。
完全从HTML中删除margin: 2px auto;标记,将其替换为<img>(以使包含的&nbsp;为非空),然后将容器设置为<a>


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

关于html - 图像上有一个奇怪的图标并在其上勾勒出轮廓,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38172960/

相关文章:

javascript - 如何使我的应用适合整个屏幕

java - 使用 Canvas 和位图的全屏图像

html - Chrome重新调整CSS中图片的大小。即不是。(关于ff的idk)

image - 轴坐标到像素坐标? (MATLAB)

html - 高度为 :auto ends up with computed height of zero 的图像

点击功能上的javascript根本不起作用

html - 封面高度设置为100%时中途

javascript - ASP.NET输入类型图像…如何使其链接到页面?

javascript - 将Flash对象与另一个div一起放置

javascript - 替换 div 内的文本