css 点击切换背景 全部的代码
时间: 2024-04-16 20:27:51 浏览: 25
这里是一个CSS实现点击切换背景图片的完整代码示例:
HTML代码:
```html
<button id="change-bg-btn">更换背景图片</button>
<div id="bg-element" class="bg1">
<!-- 这里是你的页面内容 -->
</div>
```
CSS代码:
```css
/* 定义背景图片 */
.bg1 {
background-image: url('背景图片1的URL');
background-size: cover;
background-position: center center;
}
.bg2 {
background-image: url('背景图片2的URL');
background-size: cover;
background-position: center center;
}
```
JavaScript代码:
```javascript
// 找到要点击的按钮元素
var changeBgBtn = document.getElementById('change-bg-btn');
// 找到要更换背景图片的元素
var bgElement = document.getElementById('bg-element');
// 添加点击事件监听器
changeBgBtn.addEventListener('click', function() {
// 切换背景图片
if (bgElement.classList.contains('bg1')) {
bgElement.classList.remove('bg1');
bgElement.classList.add('bg2');
} else {
bgElement.classList.remove('bg2');
bgElement.classList.add('bg1');
}
});
```
当用户点击按钮时,上面的代码将会将`bgElement`元素的背景图片从`bg1`更换为`bg2`,再次点击将把背景图片切换回`bg1`。你可以根据需要修改CSS样式和JavaScript代码,实现更加个性化的背景切换效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)