css clip属性裁剪图片笔记

原创 国哥笔记  2018-11-10 11:11  阅读 677 views 次

clip属性定义及用法

在css中,clip属性是用来设置元素的形状,剪裁绝对定位或固定定位元素,其实就是检索或设置对象的可视区域。clip属性在实际应用中不多见,可能是很多人不了解它吧,在相关的手册也介绍的不多,下面就介绍一下clip属性怎么用。

clip属性语法格式

  • clip: rect (top, right, bottom, left) / auto / inherit;

clip属性值说明

  • auto :不裁切(默认);
  • rect (top, right, bottom, left):设置元素的形状,坐标都是以左上角即(0,0)点开始计算;
  • inherit:从父元素继承clip属性的值;

实例(裁剪出logo中的网址):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css clip属性剪裁图片笔记</title>
<style type="text/css">
body{background: #ddd;}div{width:280px; height:80px;}
#b img{position:absolute;clip:rect(56px,280px,200px,60px);}
</style>
</head>
<body>
原图:
<div id="a"><img src="https://www.ggbiji.com/wp-content/themes/Nana3.18/images/logo.png" width="280" height="80" /><br></div>
裁剪后:
<div id="b"><img src="https://www.ggbiji.com/wp-content/themes/Nana3.18/images/logo.png" width="280" height="80" /><br></div>
</body>
</html>

运行结果:

css clip属性剪裁图片笔记

 

总结:通过上边的实例,相信你已经会使用它了吧。clip属性其实就是用来在绝对定位或固定定位元素上定义一个矩形区域,该矩形区域显示,矩形区域之外透明不显示,在很多场所还是很有用的。该属性也挺好记的,记住它,说不定在某些时候会给你节约很多时间哟!

 

更多css属性请移步到——>css属性大全

本文地址:https://www.ggbiji.com/css-clip.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情