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

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

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

<!DOCTYPE html>
<html>
    <head>
        <title>Experiment</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.

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

Ответ 1

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

Достаточно:

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

Ответ 2

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

это должно помочь

Ответ 3

Джефф Бриджман прав. Все, что вам нужно - background: url ('pic.jpg')
и это предполагает, что pic находится в той же папке, что и ваш 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; /* for IE9+, Safari 4.1+, Chrome 3.0+, Firefox 3.6+ */
        -webkit-background-size: cover; /* for Safari 3.0 - 4.0 , Chrome 1.0 - 3.0 */
        -moz-background-size: cover; /* optional for Firefox 3.6 */ 
        -o-background-size: cover; /* for Opera 9.5 */
        margin: 0; /* to remove the default white margin of body */
        padding: 0; /* to remove the default white margin of body */
        overflow: hidden;
             }
    </style>
</head>
<body>
hello
</body>
</html>

Ответ 4

Вы забыли C: после файла:///
Это работает для меня

<!DOCTYPE html>
<html>
    <head>
        <title>Experiment</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>

Ответ 5

Я кодирую некоторый шаблон (мой третий сайт... "noob!"), И я не могу понять, почему изображение не может быть сохранено в стороне от множества других изображений, необходимых для моего веб-сайта, для использования в HTML, вместо использования URL-адреса, удаленного нагрузки, например
(так как мое изображение может быть в другой папке, возможно?) Мне трудно понять, насколько зловещее использование файла изображения более вероятно, чем взломать URL? Чтобы повторить мой вопрос, я не понимаю, почему бы не сохранить все изображения локально, в "образном" файле и использовать простой синтаксис HTML для их извлечения? Является ли идея очистки HTML? Простите, что я задаю еще один вопрос. Я не знаю, как продолжить поток для моего собственного запроса иначе?

Ответ 6

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