css如何改裁剪,CSS裁剪clip

前面的话

CSS裁剪clip这个属性平时用的不多,但其实它并不是CSS3的新属性,很早就开始出现了。本文将介绍关于clip属性的相关知识

定义

一个绝对定位或固定定位元素通过使用属性clip可以改变剪裁区域的形状,但并不改变元素本身的宽高属性

clip

值: rect(top,right,bottom,left) | auto | inherit

初始值: auto

应用于: 绝对定位或固定定位元素

继承性: 无

[注意]默认值auto表示元素的内容不应剪裁

rect

clip:rect(top,right,bottom,left)中的值不是边偏移,而是距元素左上角的距离。具体来说,就是top和bottom是表示距离元素上边界的距离;left和right是距离元素元素左边界的距离。这里元素的边界指元素边框外侧。

rect(...)的语法与CSS的其他语法相比不太一样。原因是它基于早期的定位草案,而该草案使用了左上偏移机制。在CSS2之前,实现这个语法的IE已经成为完备推荐,于是标准从边偏移修改成适用这个实现。但是,这意味着如果高度和宽度没有明确定义,将无法设置一致的剪裁区域。

[注意]IE7-浏览器不支持rect(top,right,bottom,left),支持的写法是rect(top right bottom left);而其他浏览器两种写法都支持

clip:rect(...)只允许长度值和auto,不允许有百分数。如果设置为auto,则相当于将剪裁边界设置为适当的内容边界。对于top或left设置auto,相当于值为0;对于right或bottom设置auto,相当于值为水平方向的宽度和或垂直方向的高度和

[注意]该元素水平方向或垂直方向的clip区域的边界是外框外侧,不包括outline

应用

【1】隐藏效果

当clip:rect(top,right,bottom,left)中的top>=bottom,或者left>=right时,可实现元素的隐藏效果,效果类似于visibility:hidden;

【2】雪碧图定位

css sprite是一种网页图片应用处理方式,它允许将一个页面涉及到的所有零星图片都包含到一张大图中,然后利用background-position来显示应该显示的区域。关于CSS Sprite的详细信息移步至此。而如果使用clip也可以实现同样的效果。

div{height:128px;overflow:hidden;

}img{position:absolute;background-color:rgba(0,255,0,0.5);clip:rect(0,auto,128px,0);

}img:hover{margin-top:-128px;clip:rect(128px,auto,auto,0);

}

【3】歌词演示效果

利用clip和background-clip实现歌词演示效果,实际上通过改变宽度也可以实现,主要用于拓展思路。

@keyframes loop{0%{

clip:rect(0,0px,100px,0);

}100%{clip:rect(0,520px,100px,0);

}}

.show,.con{width:520px;height:100px;line-height:100px;font-size:30px;position:absolute;background-color:lightgreen;

}.con{animation:loop 6s linear infinite;-webkit-background-clip:text;color:red;

}

我曾经跨过山和大海,也穿过人山人海

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值