CSS background-image - Как правильно использовать? - PullRequest
132 голосов
/ 12 мая 2009

Как правильно использовать свойство CSS background-image? Ключевые вещи, которые я пытаюсь понять, это

  1. Должен ли он быть в кавычках, т. Е. background-image: url('images/slides/background.jpg');
  2. Это может быть относительный путь (как указано выше) или полный URL-адрес?
  3. Любые другие моменты, о которых мне следует знать, чтобы убедиться, что они работают корректно в браузерах, соответствующих стандартам.

Ответы [ 10 ]

146 голосов
/ 12 мая 2009

Путь может быть либо полным, либо относительным (конечно, если изображение из другого домена, оно должно быть полным).

Вам не нужно использовать кавычки в URI; синтаксис может быть:

background-image: url(image.jpg);

Или

background-image: url("image.jpg");

Однако с W3 :

Некоторые символы, появляющиеся в URI без кавычек, такие как круглые скобки, символы пробела, одинарные кавычки (') и двойные кавычки ("), должны быть экранированы обратной косой чертой, чтобы полученное значение URI было токеном URI:' \ (',' \) '.

Так что в таких случаях необходимо либо использовать кавычки, либо двойные кавычки, либо экранировать символы.

47 голосов
/ 12 мая 2009
  1. Нет, вам не нужны кавычки.

  2. Да, вы можете. Но обратите внимание, что относительные URL-адреса разрешаются из URL-адреса вашей таблицы стилей.

  3. Лучше не использовать кавычки. Я думаю, что есть клиенты, которые их не понимают.

26 голосов
/ 12 мая 2009

1) ставить цитаты - это хорошая привычка

2) это может быть относительный путь, например:

background-image: url('images/slides/background.jpg');

будет искать папку изображений в папке, из которой загружен CSS. Поэтому, если изображения находятся в другой папке или вне дерева папок CSS, вам следует использовать абсолютный путь или относительно корневого пути (начиная с /)

3) вы должны использовать полное объявление для background-image, чтобы оно работало согласованно в браузерах, соответствующих стандартам, например:

background:blue url('/images/clouds.jpg') no-repeat scroll left center;
5 голосов
/ 12 мая 2009

Относительные пути в порядке и кавычки не нужны. Еще одна вещь, которая может помочь, - это использование свойства background «стенография» для указания цвета фона на случай, если изображение не загружается или по какой-то причине недоступно.

#elementID {
    background: #000 url(images/slides/background.jpg) repeat-x top left;
}

Обратите также внимание, что вы можете указать, будет ли изображение повторяться и в каком направлении (если вы не укажете, по умолчанию это повторение по горизонтали и вертикали), а также местоположение изображения относительно его контейнера.

4 голосов
/ 13 августа 2013

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

background-image: url('/Images/bgi.png');
1 голос
/ 27 июля 2016

вам действительно не нужны кавычки, если, скажем, use используют изображение из вашего css-файла, оно может быть

{background-image: url(your image.png/jpg etc);}
1 голос
/ 27 апреля 2014

просто проверьте структуру каталогов, где именно изображение, предположим, что у вас есть папка css и папка images вне папки css, тогда вам нужно будет использовать "../ images / image.jpg" и он будет работать так же, как и для меня, просто убедитесь, что структура каталога.

0 голосов
/ 26 мая 2016

просто напишите в своем файле CSS, как показано ниже

background:url("images/logo.jpg")
0 голосов
/ 12 мая 2009

Просмотрите соответствующие справочные страницы сайта для background-image и URI

  1. Он не должен быть в кавычках, но может использовать их, если хотите. (Я думаю, что IE5 / Mac не поддерживает одинарные кавычки).
  2. Возможно как относительное, так и абсолютное; относительный путь относительно пути файла CSS.
0 голосов
/ 12 мая 2009

Вам не нужно использовать кавычки, и вы можете использовать любой путь, который вам нравится!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...