css3中clip属性

clip 属性用来设置元素的形状。用来剪裁绝对定位元素。

当一幅图像的尺寸大于包含它的元素时，"clip" 属性允许规定一个元素的可见尺寸，这样此元素就会被修剪并显示在这个元素中。

用这个属性需要注意以下三点：

1.clip属性只能用于绝对定位元素，position:absolute或fixed。

2.clip属性有三种取值：auto 默认的

　　　　　　　　　　 inherit继承父级的

　　　　　　　　　　一个定义好的形状，但现在只能是方形的 rect()

　　clip: { shape | auto | inherit } ;

3.shape rect(<top>, <right>, <bottom>, <left>)中的四个元素不可省略。

下面看下clip属性的rect()函数

clip: rect(<top>, <right>, <bottom>, <left>);

具体四个数值表示什么呢？看两张图即可理解。

简单的理解就是：图片飞高就是bottom-top,宽就是right-left.当然图片不会是负数。

clip属性对于多数浏览器都可以用，写法会有点不同

.my-element {

position: absolute;

clip: rect(10px 350px 170px 0); /* IE4 to IE7 */

clip: rect(10px, 350px, 170px, 0); /* IE8+ & other browsers */

}

下面写一实例

<!doctype html>
<html><head><meta http-equiv="Content-type" content="text/html charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" /><title>clip</title><style type="text/css"> img {position:absolute;top:0;left:10px; clip: rect(52px, 280px, 290px, 95px);} </style> </head><body><img src="00.jpg"/></body>
</html>

　　原图和页面显示图片如下

（原图）

（页面显示）

参考资料：http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/

转载于:https://www.cnblogs.com/MissBean/p/4094658.html

css3中clip属性相关推荐

浅谈CSS3中display属性的Flex布局，关于登陆页面属性框的设置
声明:本文转发自三里屯柯南的浅谈CSS3中display属性的Flex布局http://www.cnblogs.com/xuyuntao/articles/6391728.html 基本概念采用Fl ...
fillcolor是什么意思_详解css3中 text-fill-color属性
text-fill-color是什么意思呢?单单从字面上来看就是"文本填充颜色",不过它实际也是设置对象中文字的填充颜色,和color的效果很相似.如果同时设置text-fill- ...
关于——css3新增属性有哪些？css3中新增属性（部分总结）
css3中新增属性(部分总结) 一.css3新增边框属性 border-color:为边框设置多种颜色 border-image:属性是使用图片来创建边框 border-radius:圆角边框 box ...
让CSS3中Transform属性带你一文实现炫酷的转盘抽奖效果
前端时间有个需求是客户端双端APP内嵌入整个转盘抽奖的web子系统,具体是要在后台能够控制大转盘抽奖的奖项数,和用户免费抽奖的次数,并且免费抽奖使用完,用户可以观看广告进行抽奖或使用积分抽奖.正好最近 ...
CSS3中font-face属性的用法详解
CSS3中font-face属性的用法详解 @font-face是CSS3中的一个模块,主要是把自定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕 ...
css3中的属性选择器有哪些,CSS3中属性选择器使用方法详解
css中属性选择器我感觉与css2有比较大的区别了,下面我整理了一些关于css3选择器的使用例子,希望对各位会带来帮助. 注释: 一.属性选择器除了IE6不支持外,其他的浏览器都能支持. 二.E[at ...
html中的transform属性,CSS3中transform属性
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 一.Transform描述: ransform是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转r ...
CSS3中display属性的Flex布局
编译之后的效果很明显,界面的布局也很合理,看起来很清晰.那么究竟这个属性是干嘛用的呢? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. ...
css中clip属性的使用
css的clip属性经常用不到,使用率很低. 简述clip属性 w3c介绍clip属性: 通过元素进行剪切来控制元素的可显示区域,默认情况下,元素是不进行任何剪切的,但是也有可能剪切区域也显示的设置了 ...

css3中clip属性

css3中clip属性相关推荐

最新文章

热门文章