html+css实例总结

wuchangjian2021-11-03 15:01:48编程学习

目录

        遮罩

        轮播图

        自动轮播

        点击轮播 


遮罩

        目标:当鼠标悬停在图片上时,图片上覆盖一个半透明遮罩

        方法1:

                ①设置一个父盒子(盒子大小=图片大小),图片设置为背景图片

                ②父盒子内放置一个子盒子,子盒子放置遮罩(若需要图片遮罩可以放置图片,若是纯色遮罩可以修改背景颜色),透明度设置为0

                ③子盒子添加伪元素:hover,鼠标悬停后子盒子透明度改为半透明0.5(透明度可以根据自己的需求进行设置)


                

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。