CSS可以用来控制网页中的样式和布局,其中之一就是可以用CSS来实现图片和文本的切换效果。
首先需要准备好两张不同的图片和对应的描述文本:
<div class="image-container"> <img src="image1.jpg"> <p>这是第一张图片的描述文本</p> </div> <div class="image-container"> <img src="image2.jpg"> <p>这是第二张图片的描述文本</p> </div>
然后定义CSS样式,将图片的opacity属性设置为0,将文字的display属性设置为none,这样初始的时候图片是不可见的,而文字则会隐藏起来:
.image-container img { opacity: 0; transition: opacity 0.3s ease-in-out; } .image-container p { display: none; transition: all 0.3s ease-in-out; }
接下来,定义鼠标悬浮在图片上时的效果,在此时将图片的opacity属性设置为1,将文字的display属性设置为block,使得图片变得可见,文本也会显示出来:
.image-container:hover img { opacity: 1; } .image-container:hover p { display: block; }
这样,当用户鼠标悬浮在图片上时,就可以看到对应的文本了。利用CSS的这个简单的技巧,可以实现很多有趣的网页效果。