переключить фоновые изображения MVC

Question

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

body, html {
background-repeat: no-repeat;
background-image: url("../images/image1.png");
background-size: 100%;
}

Фоновое изображение теперь отображается на каждой странице.Однако мы хотим переключаться между «image1.png» и «image2.png» для разных приложений.Есть ли простой способ переключения изображений, добавив код JavaScript и кнопку в файле _layout.cshtml?

Answer 1

Проще говоря, создайте два класса для body в css и поместите туда другой путь к изображению.

body.background1 {
  background-image: url("../images/image1.png");
}
body.background2 {
  background-image: url("../images/image2.png");
}

и затем вы можете изменить фоновое изображение, просто заменив класс в элементе bodyв JavaScript.

Answer 2

Вот способ использования jQuery для переключения фонового изображения.Я просто связал это с тегом привязки HTML и установил его обработчик onclick для этой функции.«imageId» - это идентификатор элемента img на моей странице.

JAVASCRIPT

function switchImage() {
   $('#imageId').css('background-image', "url('imageToReplace.png')");
}

или клиентом (psuedo)

function switchImage(customerImageUrl) {
    $('#imageId').css('background-image', "url('+ customerImageUrl +')");
}

HTML

 <a href="#" onclick="switchImage()">Switch</a>

или по клиенту

 <a href="#" onclick="switchImage('customer1.png')">Switch to Customer 1</a>
 <a href="#" onclick="switchImage('customer2.png')">Switch to Customer 2</a>