[分享]css切换背景图片

CSS是前端开发不可分割的一部分，它可以为网页增加各种各样的样式和特效。其中一个常用的功能是切换背景图片。在这篇文章中，我们将学习如何使用CSS来实现背景图片的切换。首先，我们需要定义一个包含背景图片...

CSS是前端开发不可分割的一部分，它可以为网页增加各种各样的样式和特效。其中一个常用的功能是切换背景图片。在这篇文章中，我们将学习如何使用CSS来实现背景图片的切换。

首先，我们需要定义一个包含背景图片的class。我们可以在CSS文件中定义如下样式：

.bg1 {
  background-image: url("image1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
} 

上述代码中，我们定义了一个名为“bg1”的class，它包含了一张背景图片。我们将其设置为不重复平铺，并且将其按照尺寸比例适应容器。

现在，我们需要为切换按钮定义一个点击事件。在HTML文件中，我们可以添加如下代码：

<button onclick="changeBackground()">切换背景图片</button> 

我们为切换按钮添加了一个onclick事件，它会调用JavaScript中的一个函数“changeBackground()”。

下面是“changeBackground()”函数的代码：

function changeBackground() {
  var element = document.body;
  element.classList.toggle("bg1");
  element.classList.toggle("bg2");
} 

上述代码中，我们定义了一个名为“changeBackground()”的JavaScript函数。它 select 了网页的body元素，并使用了classList.toggle()方法来切换“bg1”和“bg2”这两个class。

现在我们需要在CSS文件中定义第二个class——“bg2”：

.bg2 {
  background-image: url("image2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
} 

上述代码中，我们定义了一个名为“bg2”的class，并且将其设置了一个背景图片。这样，当我们点击切换按钮时，背景图片会切换为我们所定义的第二张图片。

到这里，我们已经成功地实现了切换背景图片的效果。希望这篇文章能够为您的前端开发工作提供一些帮助。