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

Question

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

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

Answer 1

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

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

background-image: url(image.jpg); 

Или

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

Однако из W3:

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

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

Answer 2

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

Answer 3

1. Нет, вам не нужны котировки.

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

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

Answer 4

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

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

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

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

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

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

Answer 5

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

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

Answer 6

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

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

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

Answer 7

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

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

Answer 8

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

Answer 9

просто написать в файле CSS, как сильфон

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

Answer 10

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

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