学习不止眼前的教程与笔记 还需实践与创新
[设为首页] [加入收藏]

搜索

温馨提示：本处只能搜索图文,搜题目请进题库

首页>>网站建设>>css>>经验笔记>>

css如何只取图片的一部分

发布时间：2019-12-08点击：

    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>

    显示结果为：

    和前面使用背景方式一样。以后遇到很多素材在一张图片上的时候就不需要抠图了，是不是很方便呢。

赞一个(0)     踩一个(0)    

相关链接

相关推荐

搜索

温馨提示：本处只能搜索图文,搜题目请进题库

图文推荐

热门文章