怎么用CSS或者JS实现鼠标点击变换背景图片？

html-css019

怎么用CSS或者JS实现鼠标点击变换背景图片？,第1张

使用jquery的toggle方法进行图片切换\x0d\x0a$(function(){\x0d\x0a$("#h1").toggle(function(){\x0d\x0a$("#h1").css("background-image","路径('./20110528073501b54e6.jpg')")\x0d\x0a},function(){\x0d\x0a$("#h1").css("background-image","路径('./2011060708410874041.jpg')")\x0d\x0a})\x0d\x0a}) \x0d\x0a\x0d\x0a\x0d\x0a \x0d\x0aCSS\x0d\x0a.hh1{\x0d\x0abackground: url("./2011060708410874041.jpg")\x0d\x0awidth: 120px\x0d\x0aheight: 90px\x0d\x0a}

background: #ff0000 url(你图片的地址) no-repeat fixed 0 0

#ff0000 表示背景图片由于某种原因无法显示所显示的颜色

url() 在括号中输入你想要作为背景的图片

no-repeat 表示该背景图片是否重复显示(repeat-x repeat-y repeat 等)

fixed 0 0背景图片想要显示区域的定位

<div class="change">

</div>

<style>

.change {

animation: change 9s steps(1) infinite

background-repeat: no-repeat

background-position: center center

background-size: 100% auto

width: 200px

height: 100px

}

@keyframes change {

0% {

background-image: url(https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png)

}

33% {

background-image: url(https://www.duhongwei.site/img/201809/s1.png)

}

66% {

background-image: url(https://p4.ssl.qhimg.com/t01fcaa9d8a4d24b5f1.png)

}

}

</style>

纯 css 每3秒播一张图片。9s是总共时间，如果是4张图片这里写 12s