Можно ли использовать изображение из локальной файловой системы в качестве фона в HTML?

Question

У меня есть HTML-документ, размещенный на удаленном веб-сервере. Я пытаюсь установить для одного из элементов веб-страницы фоновое изображение из локальной файловой системы. Однако не удается сделать это ни в Chrome, ни в Safari, ни в Firefox (IE не пробовал).

Вот пример того, что я пробовал до сих пор:

<!DOCTYPE html>
<html>
    <head>
        <title>Эксперимент</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            html,body { width: 100%; height: 100%; }
        </style>
    </head>
    <body style="background: url('file:///Users/username/Desktop/background.png')">
    </body>
</html>

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

Вопрос заключается в следующем: возможно ли то, что я пытаюсь сделать, или это функция безопасности браузера, блокирующая доступ внешних доменов к локальным ресурсам пользователя?

Answer 1

Свойство background в CSS позволяет задать фоновое изображение для элемента. В данном случае, используемая строка кода:

background: url(../images/backgroundImage.jpg) no-repeat center center fixed;

содержит несколько важных компонентов:

url(../images/backgroundImage.jpg) - указывает путь к изображению фона. .. означает, что мы идем на уровень выше по иерархии папок к папке images для поиска файла backgroundImage.jpg.
no-repeat - это значение предотвращает повторение фонового изображения. То есть изображение будет отображаться только один раз.
center center - эти параметры центрируют фоновое изображение как по вертикали, так и по горизонтали внутри элемента.
fixed - это значение закрепляет фоновое изображение относительно окна браузера. При прокрутке страницы изображение останется на месте, а не будет двигаться вместе со страницей.

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

Answer 2

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

background-image: url("img1.png");

Это укажет браузеру искать файл img1.png в директории, где расположен ваш CSS-файл. Убедитесь, что имя файла и его расширение указаны правильно, чтобы избежать ошибок.

Answer 3

Jeff Bridgman прав. Всё, что вам нужно — это:

background: url('pic.jpg')

предполагая, что изображение находится в той же папке, что и ваш html-файл.

Кроме того, ответ Роберто работает отлично. Я протестировал его в Firefox и IE. Спасибо Raptor за добавление оформления, которое позволяет отображать полное изображение, адаптированное под экран, без прокрутки...

Предположим, у вас есть папка f на рабочем столе, где находятся этот html-файл и изображение pic.jpg, используя ваш идентификатор пользователя. Внесите соответствующие изменения в приведённый ниже код:

<html>
<head>
    <style>
        body {
            background: url('file:///C:/Users/userid/desktop/f/pic.jpg') no-repeat center center fixed;
            background-size: cover; /* для IE9+, Safari 4.1+, Chrome 3.0+, Firefox 3.6+ */
            -webkit-background-size: cover; /* для Safari 3.0 - 4.0, Chrome 1.0 - 3.0 */
            -moz-background-size: cover; /* необязательно для Firefox 3.6 */
            -o-background-size: cover; /* для Opera 9.5 */
            margin: 0; /* убираем стандартные белые отступы у body */
            padding: 0; /* убираем стандартные белые отступы у body */
            overflow: hidden;
        }
    </style>
</head>
<body>
hello
</body>
</html>

Не забудьте заменить userid на ваше имя пользователя!

Answer 4

Firefox не позволяет открывать локальные файлы. Но если вам нужно протестировать другое изображение (что мне как раз и потребовалось), вы можете просто сохранить всю страницу локально, а затем вставить URL (file:///somewhere/file.png) — это сработало для меня.

Answer 5

Вы забыли указать "C:" после "file:///".

У меня это работает:

<!DOCTYPE html>
<html>
    <head>
        <title>Эксперимент</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            html, body { width: 100%; height: 100%; }
        </style>
    </head>
    <body style="background: url('file:///C:/Users/Roby/Pictures/battlefield-3.jpg')">
    </body>
</html>

Убедитесь, что путь к изображению указан правильно.

Можно ли использовать изображение из локальной файловой системы в качестве фона в HTML?

5 ответ(ов)

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных