CSS中如何实现两张图片重叠并居中呢?借助CSS3的transform属性可以轻松实现此效果,具体实现方法如下: <div class= parent > <
CSS中如何实现两张图片重叠并居中呢?借助CSS3的transform属性可以轻松实现此效果,具体实现方法如下:
<div class="parent"> <img class="image-1" src="image-1.jpg"> <img class="image-2" src="image-2.jpg"> </div> <style> .parent { position: relative; } .image-1, .image-2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .image-1 { z-index: 1; } </style>
首先,我们需要一个包裹两张图片的容器,并让它的position属性为relative,这是为了让子元素定位时相对于它的位置。然后,分别为两张图片添加position: absolute属性,再为它们的top和left属性都设置成50%,这是为了让它们在水平和垂直方向上居中对齐。接下来,利用CSS3的transfrom属性,使用translate(-50%, -50%)来让图片在实现居中的同时,沿着X、Y轴各向左和向上移动自身宽度和高度的50%(即居中显示)。为了让第一张图片在第二张图片的上方,我们给第一张图片添加了z-index:1的属性。
以上就是实现两张图片重叠并居中的方法了,您可以根据实际需求调整代码来达到更完美的效果。
粉丝
0
关注
0
收藏
0