CSS background-image - Какое правильное использование?

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

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

Ответы

Ответ 1

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

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

background-image: url(image.jpg);

или

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

Однако из W3:

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

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

Ответ 2

  • Нет, вам не нужны кавычки.

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

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

Ответ 3

1) положительные кавычки - хорошая привычка

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

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

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

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

background:blue url('/images/clouds.jpg') no-repeat scroll left center;

Ответ 4

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

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

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

Ответ 5

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

background-image: url('/Images/bgi.png');

Ответ 6

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

Ответ 7

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

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

Ответ 8

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

Ответ 9

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

background:url("images/logo.jpg")

Ответ 10

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

{background-image: url(your image.png/jpg etc);}