css如果想要只显示也就是只取图片的某一部分显示,迷糊想到了方式有:
1、图片直接用软件分割想要的部分(这里就不演示了)
2、使用背景图片的方式,前面也说过,链接在此http://www.mihuguan.com/article/157568299574.html
3、使用img中的clip 属性(本节课介绍的方法)
一:css的clip属性介绍
语法:
clip:rect(top right bottom left);
相关参数:
1、top是想要显示区域的上边框离图片顶部的距离
2、bottom是想要显示区域的下边框离图片顶部的距离
3、left是想要显示区域的左边框离图片最左边的距离
4、right是想要显示区域的右边框离图片最左边的距离
css的clip属性是用来规定一个元素的可见大小,也就是说可以设定想要显示的区域。
注意事项:
1、clip 属性剪裁绝对定位元素,意思就是说需要和position:absolute;组合使用。
2、裁剪的区域必须是矩形,并且是一个封闭的图形。
二:使用实例
如果想要使用上图中第一行第二个图片,需要量出以上四个数据,本实例取值为46px 229px 83px 193px
实例代码为:
<html> <head> <meta charset='utf-8'> <link rel="styleheet" href="mystyle.css"> <title>css样式表</title> </head> <body> <style> .show{ position:absolute; clip:rect(46px 229px 83px 193px); } </style> <img src="/images/2.png" class="show"> </body> </html>显示结果为:
和前面使用背景方式一样。以后遇到很多素材在一张图片上的时候就不需要抠图了,是不是很方便呢。
Javascript2020-05-09
HTML2020-01-26
HTML2020-03-13
MySQL2020-12-13
我的世界2020-04-14
HTML2020-01-31