css实现多余图片隐藏

2018年2月20日星期二
实现多余图片隐实现多余图片隐藏
用css实现多余图片隐藏
效果图：

原图：

那么如何实现css隐藏右边的图片呢
1、首先将效果图左右两边都用div包裹住，在右边div中写标签放我们需要的图（注意，要想使左右两边的div并排两个div都要在css中加display:inline-block;意思就是行内块元素）
2、然后在css调图片位置，用position: relative;用这个定位其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。然后调top和left属性，让它超出div边框，这时多出的部分会占用地方

这时在包裹图片的div中加上overflow: hidden； 属性，这个属性的作用就是将超出屏幕的内容隐藏，然后发现超出屏幕的内容已经不见了，此时在将包裹图片的div用position: relative;定位到合适的位置我们的效果图就做好啦！