在网页设计中,常常需要使用图片来美化网站,但是有时候需要根据不同的需求换一张图片,这时候就需要实现图片替换效果了。下面就让我们来学习一下如何使用CSS实现图片替换效果。首先,在HTML中加入一个img
<div class="img-container"> <img src="img1.jpg" alt="图片1"> </div>
.img-container { position: relative; display: inline-block; } .img-container img { display: block; width: 100%; } .img-container::before { content: ""; background-image: url("img2.jpg"); background-repeat: no-repeat; background-size: contain; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; z-index: 1; transition: opacity 0.5s ease-in-out; } .img-container:hover::before { opacity: 1; }
粉丝
0
关注
0
收藏
0