Изображение имеет странную иконку и наброски над ней

Мне нужен большой баннер в верхней части экрана, идущий от конца до конца. Это должна быть ссылка, а на баннере это изображение. У меня есть все, что создано и работает. Тем не менее, вокруг него все это серый квадрат, а в верхнем левом углу - значок, который отображается, когда изображение не найдено. Как удалить поле и значок?Изображение имеет странную иконку и наброски над ней

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

правки: Больше информации и снимки экрана.

Если удаляется либо фон: строка url в style.css, либо тег img в header.php, изображение в баннере перестает отображаться. Тем не менее, когда тег 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, учитывая URL-адрес в адресной строке) для тега <img>. Аналогично, он должен находиться в той же папке, что и файл CSS для декларации фона.

Поскольку позиция самого тега <img> не указана в вашем CSS, она должна отображаться в верхнем левом углу контейнера. Фоновое изображение центрировано, поэтому оно должно отображаться в центре. Учитывая, что в центре есть изображение и отсутствует значок изображения слева, похоже, что тег HTML <img> указывает на несуществующий файл. Это, в свою очередь, означает, что файл PNG находится в той же папке, что и файл CSS, но в другой папке, кроме файла PHP. Возможно, файлы CSS и PNG находятся в подпапке под названием style или что-то в этом роде?

При удалении фона фона: url в style.css или тега img в header.php изображение в баннере перестает отображаться.

Это имеет смысл. Так как фон, определенный CSS, объявлен в теге (не содержащий <a> или <div>), удалив тег из разметки HTML, естественно также удаляет фоновое изображение. И наоборот, поскольку тег HTML указывает на неправильный путь, наличие тега также означает, что будет отсутствующий значок изображения.

Вы можете решить эту проблему двумя простыми способами:

Выяснить, где изображение располагается по отношению к файлу index.php, и убедитесь, что указывает на правильное место (возможно src="style/vcu.png" или что-то в этом роде) , Затем создайте тег <img> с чем-то вроде margin: 2px auto;, чтобы центрировать изображение и дать ему пару пикселей пространства сверху и снизу и избавиться от описания фона в вашем CSS.
Удалите <img> тег из вашего HTML вообще, замените его   (сделать содержащий <a> непустой), и стиль контейнер быть display: block.

Первый результат дает более семантический код и будет моим предпочтением; но оба должны делать то же самое в обычных браузерах. Однако удаление тега <img> также устраняет его атрибут alt, поэтому пользователи, полагающиеся на системы преобразования текста в речь, не смогут узнать, что на самом деле делает эта ссылка, поскольку только содержательный контент, который он будет содержать, является неразрывным пространством.

источник

2016-07-03 19:57:59

Изображение имеет странную иконку и наброски над ней

ответ

Смежные вопросы