javascript - 切换背景图像 MVC

Question

我有以下 css 定义来加载背景图像。

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

背景图像现在显示在每个页面上。但是，我们希望针对不同的应用程序在“image1.png”和“image2.png”之间切换。是否有通过在 _layout.cshtml 文件中添加一些 JavaScript 代码和一个按钮来切换图像的简单方法？

Answer 1

这是一种使用 jQuery 来切换背景图像的方法。我只是将其连接到一个 HTML anchor 标记并将其 onclick 处理程序设置为此函数。 “imageId”是我页面上img元素的id。

JavaScript

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

或按客户(伪)

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>