使用JS操作CSS实现JS改变背景图片

在写一个后台管理系统的界面时候，想要实现每次刷新界面或者访问界面时候会重新加载一张图片并且每次都不一样，于是乎就去想了个方法去实现它，最终方案是通过js来改变div的css属性来实现改变页面背景。
1、上传图片
通过图床上传几张图片到网络上，这样就可以不用在本地获取图片了，然后你会得到你的图片的URL，接着进行下一步

2、改变div的url

<div class="main-bg" id="divBg"> //注意，你的js代码一定要等html代码加载完成再对其进行修改url，否则你将会无法获取对应的div节点<script>var arr=['https://ftp.bmp.ovh/imgs/2021/03/f9123a689d2b729b.jpeg','https://ftp.bmp.ovh/imgs/2021/03/77a499a26d6a9cc9.jpg','https://ftp.bmp.ovh/imgs/2021/03/0c16f2ad8d1dfb1d.jpg','https://ftp.bmp.ovh/imgs/2021/03/d8e43cd5a5be130d.jpg','https://ftp.bmp.ovh/imgs/2021/03/4fb974fafbedf2ad.jpg','https://ftp.bmp.ovh/imgs/2021/03/86c2b9913133d49e.jpg','https://ftp.bmp.ovh/imgs/2021/03/40be5be806057b00.jpg']var images=arr[parseInt(Math.random()*arr.length-1)]document.getElementById("divBg").style.backgroundImage="url("+images+")";
</script>

使用JS操作CSS实现JS改变背景图片相关推荐

html5中背景图片的大小怎么调,css中怎么改变背景图片大小？
在CSS中,想要改变背景图片的大小,可以通过设置background-size属性来实现.下面本篇文章就来给大家介绍一下使用background-size属性改变背景图片大小的方法,希望对大家有所帮助 ...
JavaScript 如何使用JS操作CSS
家人们,新的一天新的知识点,我们要开启新的课程啦,今天带大家学习如何使用JS操作css,大家有不懂得可以私信我,或者在下方评论噢,现在就让我带你们进入知识的海洋中. 一.什么是css? Cascad ...
js实现点击切换checkbox背景图片
转载自:http://www.bijishequ.com/detail/384166?p= 首页专题博客文章登录注册 www.bijishequ.com 搜索笔记社区共收录522,437篇 ...
html checkbox复选框更换背景,js实现点击切换checkbox背景图片的简单实例
在制作网页的过程中,经常需要实现点击切换背景图片的效果,本文关注的是表单中checkbox背景图片切换的实现.如图,在输入用户名和密码后,用户需要选择是否记住密码图片背景为白色表示未勾选状态 ,背景 ...
怎么修改背景图片大小的HTML代码,css如何改变背景图片大小？
我们现在经常会用到CSS,在编写过程中,会遇到CSS背景图像大小设置的问题.那么css如何改变背景图片大小?下面本篇文章就来给大家介绍一下,希望对大家有所帮助. 在CSS中,想要改变背景图片的大小,可 ...
一款基于jquery的下拉点击改变背景图片
今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览源码下载实现的代码. html代码: <a ...
CSS中如何实现背景图片透明并且固定和文字不透明效果
设置背景图片的透明度,并且该背景图片不随鼠标滚动而移动,我们可以使用滤镜filter中的透明度设置opacity,并使用伪类before和定位至于opacity的作用:转化图像的透明程度.值定义转换 ...
gif背景图html,CSS按钮及gif背景图片的运用
很多网站的按钮都是通过 JavaScript 改变背景图片来实现的,例如: style="width:70px; height:35px; background:url(bg.jpg);&q ...
CSS添加多个背景图片
CSS添加多个背景图片如果给页面添加多个背景,但是,在CSS中一个标记只能用一次background属性. 因此,只有给多个标记添加不同背景来实现,比如,在body标记设置了背景图片的基础上,可以再 ...

使用JS操作CSS实现JS改变背景图片

使用JS操作CSS实现JS改变背景图片

使用JS操作CSS实现JS改变背景图片相关推荐

最新文章

热门文章