CSS可以让我们实现很多有趣的效果,比如两张图重叠显示一半的效果。我们可以使用<div>标签来包裹两张图片,然后使用CSS来实现这个效果。<div class
CSS可以让我们实现很多有趣的效果,比如两张图重叠显示一半的效果。
我们可以使用<div>
标签来包裹两张图片,然后使用CSS来实现这个效果。
<div class="overlap"> <img src="img1.jpg" alt="image 1"> <img src="img2.jpg" alt="image 2"> </div>
以上是HTML代码,接下来我们来看CSS代码。
/* 设置包裹图片的div为相对定位 */ .overlap { position: relative; } /* 设置其中一张图片的位置 */ .overlap img:first-child { position: absolute; left: 0; top: 0; width: 50%; z-index: 1; /* 设为1使其在另一张图片上方显示 */ } /* 设置另一张图片的位置 */ .overlap img:last-child { position: absolute; right: 0; bottom: 0; width: 50%; }
以上就是实现这个效果所需要的CSS代码。我们通过给包裹图片的<div>
设置相对定位,然后分别给两张图片设置绝对定位和不同的left、right、top以及bottom来完成这个效果。
这是一个简单而有趣的CSS效果,如果你感兴趣的话,不妨尝试一下吧。
粉丝
0
关注
0
收藏
0