Question

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

let innerView = self.view.viewWithTag(12)

背景图片现在显示在每个页面上。但是，我们希望在不同的应用程序之间切换“image1.png”和“image2.png”。有没有一种简单的方法可以通过在body, html { background-repeat: no-repeat; background-image: url("../images/image1.png"); background-size: 100%; }文件中添加一些JavaScript代码和一个按钮来切换图像？

Answer 1

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

<强> 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>

Answer 2

以简单的方式，在css中为body提供两个类，并将不同的图像路径放在那里。

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

然后，您可以通过在javascript中替换body元素中的类来更改背景图像。

切换背景图像MVC

2 个答案: