学习不止眼前的教程与笔记 还需实践与创新

搜索

首页>>网站建设>>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)    

相关链接

搜索

昵称:*
邮箱:
电话:
评论: