CSS background-image - что такое правильное использование?
Как правильно использовать свойство CSS background-image?
Ключевые вещи, которые я пытаюсь понять, это
- это должно быть в кавычках, т. е.:
background-image: url('images/slides/background.jpg');
- может ли это быть относительный путь (как указано выше) или это должен быть полный URL?
- любые другие моменты, о которых я должен знать, чтобы убедиться, что он работает правильно в браузерах, совместимых со стандартами.
10 ответов:
путь может быть либо полным, либо относительным (конечно, если изображение из другого домена, оно должно быть полным).
вам не нужно использовать кавычки в URI; синтаксис может быть:
background-image: url(image.jpg);или
С W3:background-image: url("image.jpg");некоторые символы, появляющиеся в НЕКОТИРУЕМОМ URI, такие как круглые скобки, пробелы, одинарные кавычки (') и двойные кавычки ( " ), должны быть экранированы обратной косой чертой, чтобы результирующее значение URI-это маркер URI: '\(', '\)'.
нет, вам не нужно цитат.
Да, вы можете. Но обратите внимание, что относительные URL-адреса разрешаются из URL-адреса вашей таблицы стилей.
лучше не использовать кавычки. Я думаю, что есть клиенты, которые не понимают их.
1) ставить кавычки-это хорошая привычка
2) это может быть относительный путь, например:
background-image: url('images/slides/background.jpg');будет искать папку изображений в папке, из которой загружается css. Поэтому, если изображения находятся в другой папке или вне дерева папок CSS, вы должны использовать абсолютный путь или относительно корневого пути (начиная с /)
3) Вы должны использовать полное объявление для фонового изображения, чтобы заставить его вести себя последовательно через совместимые со стандартами браузеры например:
background:blue url('/images/clouds.jpg') no-repeat scroll left center;
относительные пути в порядке, и кавычки не нужны. Еще одна вещь, которая может помочь, это использовать "стенографию"
backgroundсвойство для указания цвета фона в случае, если изображение не загружается или недоступно по какой-либо причине.#elementID { background: #000 url(images/slides/background.jpg) repeat-x top left; }обратите внимание также, что вы можете указать, будет ли изображение повторяться и в каком направлении (если вы не укажете, по умолчанию повторяется горизонтально и вертикально), а также местоположение изображения относительно его контейнера.
Если ваши изображения находятся в отдельном каталоге вашего css-файла, и вы хотите, чтобы относительный путь начинался с корня вашего веб-сайта:
background-image: url('/Images/bgi.png');
просто проверьте структуру каталогов, где именно изображение предположим, что у вас есть папка css и папка изображений за пределами папки css, тогда вам придется использовать"../ images / image.формат jpg" и он будет работать так же, как и для меня, просто убедитесь, что структура каталога.
вам действительно не нужны кавычки, если, скажем, use использует изображение из вашего файла css, это может быть
{background-image: url(your image.png/jpg etc);}
посмотрите на соответствующие справочные страницы sitepoint для фон-изображение и URIs
- он не должен быть в кавычках, но можете использовать их, если вам нравится. (Я думаю, что IE5 / Mac не поддерживает одинарные кавычки).
- возможно как относительное, так и абсолютное; относительный путь относительно пути файла css.
Comments