Фоновое изображение не появляется - PullRequest
3 голосов
/ 03 января 2012

Я новичок в HTML и CSS в целом.Пожалуйста, помогите мне с кодом.Я не могу заставить фоновое изображение появляться в моем браузере, хотя я набрал синтаксис правильно.Все, что я получаю, это оранжевая коробка без изображения alert.png.Я слежу за интерактивным учебным пособием: http://dev.opera.com/articles/view/31-css-background-images/#thecode

Редактировать 1: изображение, HTML-файл и CSS-файл находятся в одной папке.Пока что безуспешно.

Редактировать 2: Я использовал уникальное имя файла CSS вместо общего «style.css» (который у меня есть несколько из них в моей системе), и это сработало!Убедитесь, что между URL и круглыми скобками нет места.

Код HTMl:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <meta http-equiv="Content-Type" content="text/html; 
        charset=utf-8">
        <title>alert message</title>
    </head>

    <body>
<p class="alert">
  <strong>Alert!</strong> 
    This is an alert message.
</p>
    </body>
</html>

Код CSS:

.alert {
width: 20em;
background-image: url(C:\Documents and Settings\USER\My Documents\alert.png);
background-color:orange;
margin: auto;
padding: 2em;
}

Ответы [ 6 ]

2 голосов
/ 03 января 2012

URL должен быть строкой:

url("C:\Documents and Settings\USER\My Documents\alert.png");
1 голос
/ 03 января 2012

Я полагаю, что это проблема с разрешениями, несмотря на то, что у вас, скорее всего, будут проблемы с URL-адресом, являющимся ссылкой на файл, когда вы перемещаете его на сервер, я бы порекомендовал переместить ваше изображение в то же место (или, что еще лучше, в папку изображений в корне вашего сайта) в виде html-файла, а затем измените ваш css на этот

.alert {
  width: 20em;
  background-image: url('/alert.png'); /* '/images/alert.png' */
  background-color:orange;
  margin: auto;
  padding: 2em;
}
0 голосов
/ 09 августа 2015

В оригинальном вопросе, который он имел в своем CSS

background-image: url (C: \ Documents and Settings \ USER \ Мои документы \ alert.png);

У меня возникли проблемы со страницей галереи, где в качестве фоновых изображений были изображения. Любое имя файла с пробелами не будет отображаться. Это был только тот факт, что на одном изображении вместо знаков пробелов подчеркивалось, и, похоже, я смог его отследить. Поскольку в его URL есть пробелы, это может быть проблемой. Я исправил свою проблему, используя \ для экранирования любых символов, например пробелов, вызывающих проблему. т.е.

A \ space \ in \ the \ filename.jpg

хотя это может не работать в пути Windows! Если изображение находится в том же каталоге, что и скрипт, ему все равно не нужен полный URL.

0 голосов
/ 27 июля 2014

Сначала поместите ваше изображение alert.png в ту же папку, что и ваш HTML-файл.

Затем попробуйте это в своем CSS-файле:

body {
     background: orange url("alert.png") no-repeat;
}

Я думаю, что проблема заключалась в "\"in \ alert.png

Удачи!

0 голосов
/ 03 января 2012

Пожалуйста, проверьте ваш URL, если возможно, вы можете использовать firebug, который является аддоном Firefox, который определенно поможет вам, указав, загружено изображение или нет.

В противном случае другим решением было бы повысить ваш класс оповещений следующим образом

.alert {
  width: 20em;
  background-image: url('/alert.png'); /* '/images/alert.png' */
  background-color:orange;
  margin: auto;
  padding: 2em;
  height: /* height of image*/
}
0 голосов
/ 03 января 2012

Другой способ сделать что-либо - поместить ваш текст в div и установить изображение в качестве фонового изображения div, используя css, например:

<div class="alert">
   <p>
     <strong>Alert!</strong>
     This is an alert message.
   </p>
</div>

А для CSS:

.alert {
     width: 20em; (Width of entire div, which includes text and bg image)
     background-image: url('../alert.png');
     background-color: orange;
     margin: auto;
     padding: 2em;
}

Вы можете увидеть живой пример JSFiddle здесь: http://jsfiddle.net/Cwca22/TdDJY/

Кроме того, в приведенном выше коде фоновое изображение будет располагаться (повторяться) как по горизонтали, так и по вертикали, чтобы заполнить пространство div. Чтобы предотвратить это, вы можете сделать div такой же высоты и ширины, что и фоновое изображение, или поместить background-repeat: no-repeat в свой CSS под классом .alert.

Надеюсь, это поможет и удачи!

...