изменить фоновое изображение в теле

Как изменить фоновое изображение в CSS во время выполнения? У меня есть следующее фоновое изображение в теле и может ли изображение быть изменено во время выполнения?изменить фоновое изображение в теле

body { 
height: 100%; 
background: #fff8db url(../images/backgrounds/header-top.jpg) no-repeat center top; 
/*background-color: #fff8db;*/ 
/*background-size: 1650px 900px;*/ 
font-family: Arial, Verdana, Helvetica, sans-serif; 
font-size:12px; 
font-weight:normal; 
color:#404040; 
line-height:20px; }

источник

2012-06-03 VeecoTech

Если у вас есть JQuery уже загружен, вы можете просто сделать это:

$('body').css('background-image', 'url(../images/backgrounds/header-top.jpg)');

EDIT:

Первый JQuery нагрузки в голову тег:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Затем вызовите Javascript, чтобы изменить фоновое изображение, когда что-то происходит на странице, например, когда он заканчивает загрузку:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('body').css('background-image', 'url(../images/backgrounds/header-top.jpg)'); 
    }); 
</script>

источник

2012-06-03 02:54:29 nathancahill

Я пробовал применить ваш код в html, но никаких изменений. – VeecoTech

Просто, чтобы указать, исходный вопрос требует строго javascript-ответа, и это использует jquery. Ответ ниже - правильный способ сделать это в соответствии с фактическим вопросом. Не уверен, почему это было выбрано как лучший ответ. – ChapmIndustries

Ответ начинается с «Если у вас уже загружен JQuery ...», на котором уже много веб-сайтов. – nathancahill

Для этого вам понадобится Javascript. Вы можете установить стиль для background-image для такого тела.

var body = document.getElementsByTagName('body')[0]; 
body.style.backgroundImage = 'url(http://localhost/background.png)';

Просто убедитесь, что вы заменить URL с фактическим URL .

источник

2012-06-03 02:46:29

привет, но я не вношу никаких изменений из кода ниже. – VeecoTech

Вам нужно либо поместить его в конец тега тела, либо вызвать его при загрузке документа. –

Ваше решение сработало для меня. Спасибо! – wowzuzz

Просто установите функцию OnLoad на теле:

<body onload="init()">

Затем сделать что-то подобное в JavaScript:

function init() { 
    var someimage = 'changableBackgroudImage'; 
    document.body.style.background = 'url(img/'+someimage+'.png) no-repeat center center' 
}

Вы можете изменить 'someimage' переменную, что вы хотите в зависимости на некоторых условиях, таких как время суток или что-то еще, и это изображение будет установлено как фоновое изображение.

источник

2012-06-03 04:47:43 jimjimmy1995

Если вы страница имеет Open Graph изображение, обычно используемое для социального обмена, вы можете использовать его, чтобы установить фоновое изображение во время выполнения с ванилью JavaScript следующим образом:

<script> 
    const meta = document.querySelector('[property="og:image"]'); 
    const body = document.querySelector("body"); 
    body.style.background = `url(${meta.content})`; 
</script>

выше использует document.querySelector и Attribute Selectors до присвойтеmeta первое открытое графическое изображение, которое он выбирает. Аналогичная задача выполняется для получения body. Наконец, строка-интерполяция используется для присвоения body значения пути к открытому графическому изображению.

Если вы хотите, чтобы изображение, чтобы охватить все окно просмотра и оставаться фиксированное множество background-size так:

body.style.background = `url(${meta.content}) center center no-repeat fixed`; 
body.style.backgroundSize = 'cover';

Используя этот подход, вы можете установить заполнитель низкого качества фонового изображения с помощью CSS и подкачки с изображение с высокой точностью позже, используя изображение onload событие, тем самым уменьшая воспринимаемая латентность.

источник

2017-10-04 10:40:42

изменить фоновое изображение в теле

ответ

Смежные вопросы