Почему мой.png файл не отображается

По какой-то причине (которую я не могу найти) мой.png-изображение не появляется.

Я пытаюсь загрузить его на веб-сайт через мой CSS файл, а не как, например.

<section id="container_1"><code>&lt;header id="header_container_1"&gt;
 &lt;h2&gt;Over ons&lt;/h2&gt;
 &lt;/header&gt;</code> <p> CSS:</p> <pre class="prettyprint linenums">#Balloon_1{
 background: url(images/Balloon1.png);
 display: block;
 height: 70px;
 width: 64px;
}

2 ответа

Работает отлично...?

У вас есть какая-то проблема связывания:

http://jsfiddle.net/SinisterSystems/SeC6W/

HTML

<section id="container_1"><code>&lt;header id="header_container_1"&gt;
 &lt;h2&gt;Over ons&lt;/h2&gt;
 &lt;/header&gt;</code> <p> <span>CSS:</span></p> <pre class="prettyprint linenums">#Balloon_1 {
 background:url(http://www.online-image-editor.com/styles/2013/images/example_image.png);
 width:100px;
 height:100px;
 display:block;
}

С вашим текущим кодом, пожалуйста, убедитесь, что ваши .png изображения находятся именно так.

Index.html file root → Images Folder → Balloon1.png

И ваш файл CSS связывается с изображением как таковым:

../../images/Balloon1.png

Окончательный ответ для вас.

У вас есть папка с assets, поэтому вам нужно было drop back twice. Просто сделав ../ вы только вернулись в папку с вашими assets, а не с вашим root.

Root - это где находится ваш index.html.

Root → Assets → CSS → Style.css, где находится ваш style.css.

Root → Images → Balloon1.png - вот где ваше image.

Итак, поскольку ваш файл CSS глубже в дереве, вам нужно дважды вернуться назад, чтобы вернуться к вашему Root.

Root → Assets

Root

Затем вы можете перейти к...

Root → Images → File.


Прежде чем дать ответ; некоторые советы. Хорошие стандарты кодирования указывают, что если Balloon1 является элементом дизайна страницы, тогда да, вы должны загрузить его в качестве фона через CSS. Если это просто изображение на странице, которое не вносит вклад в макет сайта, вы должны продолжить загрузку его в качестве тега img.

Теперь я расскажу о других ответах, которые вам дали.

background: url(images/Balloon1.png);

это путь к файлу относительно того, где этот код находится в файле. Поэтому, если у вас есть файл CSS в папке с именем style, тогда это ищет Balloon1.png в стиле /images/Baloon1.png.

background: url(/images/Balloon1.png);

в этом примере, ведущий с косой чертой '/', указывает, что путь должен начинаться в корневом каталоге вашего сайта. Корневой каталог - это ваша основная папка, наименьший знаменатель.

background: url(../images/Balloon1.png);

В этом примере два периода используются, чтобы указать путь к началу в родительском каталоге, где бы ни находился ваш файл. Итак, если у вас есть CSS файл в папке с именем style, то это поиск Balloon1.png в anyFolderStyleIsIn/images/Baloon1.png. Вы можете комбинировать эту технику, чтобы вернуться из нескольких файлов, чтобы начать с того, где вы хотите использовать.. /../images/Balloon1.png и т.д.

background: url(http://YourURL.com/images/Balloon1.png);

В этом примере ссылка уже не является относительной и является прямой. Он указывает непосредственно на ваш файл изображения, но имеет печальный эффект от того, что ваш код применяется только к этому URL-адресу, вы не сможете копировать и вставлять этот код на другой сайт, не переписывая прямой URL-адрес.

licensed under cc by-sa 3.0 with attribution.