聊聊clip-path

原创 2016年09月10日 18:38:15

前言

图片是一个网站必不可少的元素,而呈现出绚丽多彩的图片效果在很多情况下不仅仅是设计师的工作,通过代码来修饰图片也是一个前端工程师必备的技能。因为兼容性的问题,实际项目中可能用的比较少,包括博主自己也只是用过几次剪切,很多情况下都交给设计师去做了。但作为一个hacker怎么能满足于此呢,必须深入探究!

正文

Flilter

filter有十种特效来处理图片,博主只放几种特效的样例给大家看一下:

照片反色效果:

照片反色

照片褐色效果:

照片褐色

照片阴影效果:

阴影

十种特效源码:

-webkit-filter:opacity(.6);//透明度
filter:opacity(.6);
-webkit-filter:blur(10px);//照片模糊
filter:blur(10px);
-webkit-filter:invert(1);
filter:invert(1);
-webkit-filter:saturate(3);//照片饱和度
filter:saturate(3);
-webkit-filter:grayscale(1);//照片灰度
filter:grayscale(1);
-webkit-filter:sepia(1);//照片褐色
filter:sepia(1);
-webkit-filter:hue-rotate(90deg);//色相旋转
filter:hue-rotate(90deg);
-webkit-filter:brightness(.5);//亮度
filter:brightness(.5);
-webkit-filter:contrast(2);//对比度
filter:contrast(2);
-webkit-filter:drop-shadow(10px 10px 10px #ccc);//阴影
filter:drop-shadow(10px 10px 10px #ccc);

但实际上这个属性兼容性很低:

can I use

截止博主发文日期,Filter的兼容性如上图,我们可以看到IE是完全不支持的,Edge也是部分支持。这可能也是Filter没法用在项目中的原因之一了。感兴趣的读者可以Copy博主代码本地测试一下,或是参照MDN|Filter了解。博主不在这里做过多的说明了。

clip&clip-path

这两个属性正是今天的重头戏,博主曾在从隐藏元素谈起提起过,但并没做深入解释。是的,它可以用来隐藏元素,当然也就能处理图片了。

  • clip

clip这个属性我相信会有很大一部分人不知道,因为这个属性使用率非常的低,因为很多情况下我们会直接重新切一张新图出来代替而不会去剪裁已有的图片,但实际上这个属性用在CSS sprite简直就如同神器一般,因为在很多情况下background-position并不符合我们的需求,比如,有时我们希望Sprite图片可以延迟滚动加载,或者是可以很轻松的右键图片另存为…或是其它background-position没法满足的情景。
废话不多说,看样例:
这里写图片描述

position:absolute;
clip:rect(50px 250px 250px 50px); /* IE6, IE7 */
clip:rect(50px,250px,250px,50px);

这里写图片描述

注意,元素定位position必须是absolute或是fixed的,兼容IE6,IE7需要将值之间的逗号去掉。另外,react(top,right,bottom,left);四个值分别是相对于图片左上角为原点的坐标值。Clip基本所有的浏览器都支持,可以放心使用。

让人放弃它的原因无外乎:
- clip 只对绝对定位的元素有效对于position:relative和position:static无效
- clip 只能用于矩形,即rect()函数

  • clip-path

其实clip在HTML5中已经被废弃了(依然可用),取而代之的是clip-path。本来clip还有一个circle(圆),但基本没有浏览器实现这个属性值,只有rect()可是使用,可能W3C也是等不下去了吧,直接推出了一个更牛逼的属性——clip-path,这个属性起初是SVG里面的然后被挪用到了CSS里面。关于SVG博主有时间会再另外介绍,这里按下不表。效果图:
这里写图片描述
这里写图片描述

读者可以在这里自行体验

兼容:现在为止IE 和 Edge 不支持这个属性,Firefox 仅部分支持 clip-path ,
Chrome、Safari 和 Opera 需要使用 -webkit- 前缀支持此属性。
这里写图片描述
clip-path兼容性甚至比前面说到的filter还差,所以很难真正使用起来。更多使用效果戳这里这里

说一下它的四个属性值:

  • clip-source: 可以是内、外部的SVG的clipPath元素的URL引用;

  • basic-shape: 使用一些基本的形状函数创建的一个形状。主要包括circle()、ellipse()、inset()和polygon()。

  • geometry-box: 是可选参数。此参数和basic-shape函数一起使用时,可以为basic-shape的裁剪工作提供参考盒子。如果geometry-box由自身指定,那么它会使用指定盒子形状作为裁剪的路径,包括任何(由border-radius提供的)的角的形状。

开始使用clip-path

在开始使用clip-path绘制图形,或者说裁剪图形之前,有两点需要大家注意:

  • 使用clip-path要从同一个方向绘制,如果顺时针绘制就一律顺时针,逆时针就一律逆时针,因为polygon是一个连续线段,若线段彼此有交集,裁剪区域就会有相减的情况发生,当然如果你特意需要这样的效果除外。

  • 如果绘制时采用比例的方式绘制,长宽就必须要先行设定,不然有可能绘制出来的长宽和我们想像的就会有差距,使用像素绘制就不会有这样的现象。

我们就拿上面途中的六边形作为polygon()函数示例:

-webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);

效果图:

效果图

讲解:

这里写图片描述

每个点的第一个坐标值决定了它在 x 轴上的位置,第二个坐标值指定了它在 y 轴的位置,所有点是顺时针绘制的。其实一个 polygon()就能满足所有的形状需要了,有自定义的API用更加方便不是么。

注意:inset()这个真的坑,按说同样裁剪成方形应该是和clip的rect一样用法,可不一样!

//Clip的rect
position:absolute;
clip:rect(50px 250px 250px 50px);
//clip-path
clip-path: inset(50px 50px 50px 50px);
-webkit-clip-path: inset(50px 50px 50px 50px);

本文使用图片是300*300的。

很明显:


clip:rect(50px 250px 250px 50px);
=clip-path: inset(50px 50px 50px 50px);

好大的一个坑….

结束语

相信随着时代发展,clip-path会慢慢被浏览器厂商接受的。
本文有任何错误,欢迎评论留言。

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Jizhen_Tan/article/details/52496400

svg之clip-path更多效果的实现

一个方便实现效果的网站: http://bennettfeely.com/clippy/  记得用chrome浏览器打开,然后写的时候记得加上兼容,如果是手机页面上的话就不用浏览器兼容了...
  • u010289111
  • u010289111
  • 2017-06-09 16:40:47
  • 110

Path曲线下的阴影绘制

开发动机 我们经常使用MPchart来绘制各种类型的图表,非常好用。可以设置各种各样的样式。但是有时候满足不了我们的需求或者我们需要绘制的曲线很简单但是MPchart jar包不小,所以我们需要自定...
  • Vxiaocai
  • Vxiaocai
  • 2018-01-17 14:49:43
  • 119

clip-path 兼容多种浏览器

一般的图层裁剪,可能存在firebox下的兼容性问题。 我们可以通过创建内联svg的方式去解决 如下: .specialoffers:after{     content: '17%\AOF...
  • u010289111
  • u010289111
  • 2016-06-18 10:15:01
  • 2317

聊聊clip-path

前言 图片是一个网站必不可少的元素,而呈现出绚丽多彩的图片效果在很多情况下不仅仅是设计师的工作,通过代码来修饰图片也是一个前端工程师必备的技能。因为兼容性的问题,实际项目中可能用的比较少,包括博主...
  • Jizhen_Tan
  • Jizhen_Tan
  • 2016-09-10 18:38:15
  • 1440

聊聊Clip-Path

前言 图片是一个网站必不可少的元素,而呈现出绚丽多彩的图片效果在很多情况下不仅仅是设计师的工作,通过代码来修饰图片也是一个前端工程师必备的技能。因为兼容性的问题,实际项目中可能用的比较少,包括博主自...
  • yeana1
  • yeana1
  • 2016-09-29 15:15:23
  • 880

CSS3:clip-path详解

我的一个学生,Heather Banks,想要实现他在Squarespace看到的一个效果: 根据她的以往经验,这个网站的HTML和CSS是完全在她的能力范围以内,于是我帮助她完成了这个效果。显...
  • u011043843
  • u011043843
  • 2015-07-07 11:31:23
  • 1359

append("clipPath")

CSS3/SVG clip-path路径剪裁遮罩属性简介 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhan...
  • csdn_huangyumin
  • csdn_huangyumin
  • 2015-11-04 12:47:11
  • 227

打破盒子模式的限制,使用Clip-Path创建响应式图形

转载地址:http://www.w3cplus.com/css3/creating-responsive-shapes-with-clip-path.html CSS的clip-pa...
  • abxn2002
  • abxn2002
  • 2015-12-29 17:36:42
  • 626

利用SVG clip-path显示动画图片

利用SVG clip-path显示动画图片 需求:手头的动画资源大部分为同一图片的动画集合,而SVG中没有能够直接利用的办法 解决方法:将图片显示在SVG中,并根据帧数,动态生成clip-path...
  • firefight
  • firefight
  • 2012-03-29 14:18:36
  • 3542

clip-path的使用和实践

欢迎访问我的个人站点 demo演示 多边形图 demo1 利用css Transition制作动画 demo2 介绍 CSS 的 clip-path 属性是改变传统单调...
  • qq_22833925
  • qq_22833925
  • 2018-01-10 20:12:46
  • 54
收藏助手
不良信息举报
您举报文章:聊聊clip-path
举报原因:
原因补充:

(最多只允许输入30个字)