Фоновый рисунок не отображается

Я новичок в 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; 
}

источник

2012-01-03 uohzxela

Ваш код работает так, как есть. Убедитесь, что изображение находится там, где вы ожидаете. Убедитесь, что он доступен, и разрешения не являются проблемой. См .: http://jsfiddle.net/UWFcL/ – xbonez

Эй, что вы имеете в виду под разрешениями? Я поместил изображение в ту же папку, что и html-файл, но я не могу заставить его работать. – uohzxela

, если его в той же папке, что и файл html, разрешения не должны быть проблемой. Попробуйте использовать кавычки, как упоминалось в Ramon – xbonez

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

url("C:\Documents and Settings\USER\My Documents\alert.png");

источник

2012-01-03 04:21:28

Работает и не является строкой: http://jsfiddle.net/UWFcL/ – xbonez

У вашего URL нет «пробелов», поэтому он работает без строки. Его url имеет место здесь: \ My Documents \, поэтому он должен быть строкой. –

А, да. Ты прав. – xbonez

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

.alert { 
    width: 20em; 
    background-image: url('/alert.png'); /* '/images/alert.png' */ 
    background-color:orange; 
    margin: auto; 
    padding: 2em; 
}

источник

2012-01-03 04:24:23 Robert

Я добавил его в папку «images» и поместил его в ту же папку, что и html и css-файлы. Но не могу заставить его работать, используя url ('alert.png')/url ('/ images/alert.png') – uohzxela

Я думаю, что у вас есть проблема с правами доступа. Выполняется ли это на локальном веб-сервере или в среде размещения? – Robert

У меня нет сервера, о котором я знаю. Я просто создаю html и css-файлы и запускаю html-файлы с помощью firefox. – uohzxela

Другим способом делать вещи, чтобы поместить текст в 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.

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

источник

2012-01-03 05:05:23

Я следил за вашим кодом с помощью формата div. Но до сих пор нет успеха. – uohzxela

Код, кажется, работает отлично для меня - у вас есть адрес вашего изображения? Если ваш сайт базируется в папке «Foo», и вы пытаетесь ссылаться на изображение в этой папке, вы всегда можете использовать формат . «../» означает «начать с корневой папки сайта, а затем перейти к файлу», а не просто «перейти к файлу». –

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

Else другое решение будет дать высоту вашего оповещения класса следующим

.alert { 
    width: 20em; 
    background-image: url('/alert.png'); /* '/images/alert.png' */ 
    background-color:orange; 
    margin: auto; 
    padding: 2em; 
    height: /* height of image*/ 
}

источник

2012-01-03 05:11:09

Я попытался дать высоту 10 пикселей, но не успел. – uohzxela

Это отлично работает для меня. Я имею в виду, что вы проверяете правильность пути изображения или нет. Вы пробовали firebug, чтобы проверить, загружено ли изображение или нет. –

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

Тогда попробуйте это в вашем файле CSS:

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

Я думаю, что проблема была "\" в \ alert.png

Удачи!

источник

2014-07-27 14:18:59 user3073117

В первоначальном вопросе он имел в своем CSS

фоновое изображение: URL (C: \ Documents и Settings \ USER \ Мои документы \ alert.png);

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

А \ пространства \ в \ к \ filename.jpg

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

источник

2015-08-09 16:19:51 M61Vulcan

Фоновый рисунок не отображается

ответ

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