zmiana obrazu tła w ciele

Jak zmienić obraz tła w CSS w czasie wykonywania? Mam następujący obraz tła w ciele i czy obraz może zostać zmieniony w czasie wykonywania?zmiana obrazu tła w ciele

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; }

Źródło

2012-06-03 VeecoTech

Jeśli masz JQuery już załadowane, można po prostu to zrobić:

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

EDIT:

First JQuery obciążenia w tagu głowy:

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

następnie wywołać JavaScript, aby zmienić obraz tła, gdy coś dzieje się na stronie, np. Po zakończeniu ładowania:

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

Źródło

2012-06-03 02:54:29 nathancahill

Próbowałem zastosować kod w html, ale bez zmian. – VeecoTech

W celu podkreślenia, oryginalne pytanie wymaga odpowiedzi javascript, a to wykorzystuje jquery. Poniższa odpowiedź jest właściwym sposobem, aby to zrobić zgodnie z faktycznym pytaniem. Nie wiem, dlaczego ta odpowiedź została wybrana jako najlepsza odpowiedź. – ChapmIndustries

Odpowiedź zaczyna się od "Jeśli masz już załadowane JQuery ...", które wiele stron już robi. – nathancahill

Do tego celu należy użyć Javascript. Możesz ustawić styl dla ciała tak, jak to.

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

Tylko upewnij się zastąpić URL z rzeczywistej URL.

Źródło

2012-06-03 02:46:29

Cześć DZIĘKI, ale nie dostaję żadnych zmian z poniższego kodu. var body = document.getElementsByTagName ("body") [0]; body.style.backgroundImage = 'http: // localhost/ABC/images/backgrounds/header-top1.jpg "; – VeecoTech

Musisz umieścić go na końcu znacznika body lub wywołać go po załadowaniu dokumentu. –

Twoje rozwiązanie sprawdziło się u mnie. Dziękuję Ci! – wowzuzz

Wystarczy ustawić funkcję onload na organizm:

<body onload="init()">

Następnie zrobić coś takiego w JavaScript:

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

Można zmienić 'someimage' zmienną cokolwiek chcesz w zależności w pewnych warunkach, takich jak pora dnia lub coś takiego, a obraz zostanie ustawiony jako obraz tła.

Źródło

2012-06-03 04:47:43 jimjimmy1995

Jeśli strona ma Open Graph obraz, powszechnie używany do wymiany społecznej, można go użyć, aby ustawić obraz tła w czasie wykonywania z wanilii JavaScript tak:

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

powyższych zastosowań document.querySelector i Attribute Selectors do przypisaćmeta pierwszy obraz Open Graph, który wybiera. Podobne zadanie wykonuje się, aby uzyskać body. Na koniec, interpolacja ciągów jest używana do przypisania wartościo wartości ścieżki do obrazu Open Graph.

Jeśli obraz ma objąć całą rzutnię i pozostać nieruchoma ustawić background-size tak:

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

Stosując to podejście można ustawić zastępczy niskiej jakości obrazu tła za pomocą CSS i zamieniać z obraz o wysokiej wierności później przy użyciu zdarzenie onload, zmniejszając w ten sposób opóźnienie postrzegane jako opóźnienie.

Źródło

2017-10-04 10:40:42

zmiana obrazu tła w ciele

Odpowiedz

Powiązane problemy