CSS中可以通过点击事件实现背景图片的改变,具体实现方式如下:/* 定义两个背景图 */ .bg-1 { background-image: url( img/bg-1.jpg ); } .bg-2
CSS中可以通过点击事件实现背景图片的改变,具体实现方式如下:
/* 定义两个背景图 */ .bg-1 { background-image: url("img/bg-1.jpg"); } .bg-2 { background-image: url("img/bg-2.jpg"); } /* 定义click事件 */ button { cursor: pointer; } button:hover { background-color: #ddd; } button:active { background-color: #ccc; } button:focus { outline: none; } /* 点击事件实现背景图改变 */ button#btn-1:focus ~ .bg { background-image: url("img/bg-1.jpg"); } button#btn-2:focus ~ .bg { background-image: url("img/bg-2.jpg"); }
以上代码实现了在HTML中定义两个背景图,同时定义click事件和样式,并最终通过点击事件实现背景图的改变。其中,点击button按钮时根据其id值分别改变背景图为`.bg-1`和`.bg-2`。
粉丝
0
关注
0
收藏
0