圖片有一個奇怪的圖標和輪廓它

我需要一個大橫幅在屏幕的頂部從頭到尾。它必須是一個鏈接，在橫幅上是一個圖像。我擁有所有的設置和工作。但是，在它周圍是一個灰色框，在左上角是未找到圖像時顯示的圖標。我如何刪除框和圖標？圖片有一個奇怪的圖標和輪廓它

的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; 
}

EDITS：更多信息以及相關截屏。

當style.css中的background：url行或header.php中的img標記被刪除時，橫幅中的圖像將停止顯示。然而，當img標籤在那裏時，怪異的圖標和輪廓，讓我相信img標籤是罪魁禍首。

截圖：

在最頂部的VCU的旗幟，你可以看到我在說什麼。在Internet Explorer中，左上角的圖標是X按鈕，而沒有輪廓。

來源

2016-07-03 Calvin

爲什麼你有PNG文件作爲圖像的圖像和背景圖像？那有什麼意義呢？在背景聲明的右括號後面還缺少一個空格，橫幅的「頂部」聲明是HTML，而不是CSS。這可能是問題的一部分。 –

@JanusBahsJacquet我在兩個地方都有圖片，因爲無論什麼原因，當我從任一位置刪除PNG文件時，它都會停止顯示。在背景聲明中缺少空格是什麼意思？感謝'頂部'的抓住，我把它刪除了。 – Calvin

url的右括號和單詞「no-repeat」之間應該有一個空格。我猜想這會導致url無效，並且瀏覽器忽略整行（或者曲解路徑並且無法加載圖像）。您是否嘗試過使用瀏覽器檢查器來查看實際顯示的內容？另外，請附上截圖（或鏈接），以便我們看到它的外觀。 –

有很多可能的原因，所以我會嘗試一個有教育的猜測，看看最可能的原因。

我不知道您的文件位於相對於彼此，但您的標記，並在這裏CSS編寫方式，文件vcu.png應在爲PHP文件相同的文件夾你在哪裏展示它（大概index.php，給定您的地址欄中的網址）爲<img>標記工作。同樣，它必須與CSS文件位於同一個文件夾中才能使後臺聲明工作。

由於<img>標籤本身的位置未在CSS中指定，因此它應顯示在容器的左上角。背景圖像居中，所以它應該顯示在中心。鑑於中間有一個圖像，左側有一個缺失的圖像圖標，看起來它是指向一個不存在的文件的HTML <img>標記。這反過來意味着PNG文件與CSS文件位於同一文件夾中，但與PHP文件不同。也許CSS和PNG文件在一個名爲style的子文件夾或類似的東西？

當style.css中的background：url行或header.php中的img標記被刪除時，橫幅中的圖像將停止顯示。

這是有道理的。由於CSS定義的背景是在圖片標記（而不是包含<a>或<div>）上聲明的，因此從HTML標記中移除標記自然也會移除背景圖片。相反，由於HTML標籤指向的是不正確的路徑，因此在此處添加標籤也意味着將會出現圖像丟失圖標。

您可以用兩種簡單的方法解決這個問題：

揣摩出圖像相對於位於您的index.php文件，並確保您指向正確的位置（也許src="style/vcu.png"或類似的東西）。然後，將<img>標籤的樣式設置爲margin: 2px auto;以使圖像居中並在頂部和底部給它一些空間像素，然後擺脫CSS中的背景聲明。
從HTML刪除<img>標籤乾脆，與 更換（以使含<a>非空），和風格的容器是display: block。

第一個產生更多的語義代碼，將是我的偏好;但是在普通瀏覽器中都應該呈現相同的效果。然而，刪除<img>標記也會刪除其alt屬性，因此依賴文本到語音轉換系統的用戶將無法知道該鏈接實際執行的操作，因爲它將包含的唯一有意義的內容是非破壞性空間。

來源

2016-07-03 19:57:59

圖片有一個奇怪的圖標和輪廓它

回答

相關問題