如何通过css来剪切图片,而且不占位

html-css011

如何通过css来剪切图片,而且不占位,第1张

在图片的外围加一个div框,然后通过这个框进行加宽高,然后用overflow:hidden来隐藏图片多余的部分。像现在很流行的圆形头像,其实图片是一张四方或者长方的图片。

然后通过对包住div的css加:border-radius:50%overflow:hidden就可以显示为圆形的图片了。关于这个是最方便的。也可以用这个方法解决图片的裁切问题。

希望我的解答可以帮到你,有什么不懂可以追问。

background-image:url('')设置图片路径

background-position:

-100px

-122px

设置图片中某一部分图的位置

第一个值是上

第二个值是左

然后通过这个图片外层标签来显示图片显示的范围

宽度和高度