文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

clip属性

代码小侠客

代码小侠客

2024-04-23 22:36

关注

  我们都知道,clip属性为比较有用处的属性,但却在实际应用中不太多见,所以,平时介绍得都很少。clip属性是检索或者是设置对象的可视区域,而可视区域外的部分是透明的。这个属性定义了绝对的定位对象可视区域的尺寸。

  (一)应用clip属性要注意的两点

  (1)clip属性一定要和定位属性,即postion一起用才可以生效。

  (2)clip裁切的计算坐标都是从左上角,就是说(0,0)点开始计算的,如图示,这与padding以及margin不一样,它们的右边距以及下边距都是从最右边以及最下边开始算的。

  (二)clip属性基础语法

  clip属性基础语法为:clip:autorect(number number number number)

  取值:

  (1)auto为默认值。对象没有剪切

  (2)rect(numbernumbernumbernumber):根据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,任一数值都能用auto替换,就是说此边不剪切。

  (三)clip属性说明

  检索或者是设置对象的可视区域,在可视区域以外的部分是透明的。

  这个属性定义了绝对定位对象的可视区域的尺寸,一定要把position属性的值设置为absolute,这个属性才可以用。

  从IE5起,这个属性在MAC平台上才能用。

  对应的脚本特性是clip。

  (1)css当中的clip属性可以制作彩色文字,还可以有效地裁切网页中的其他剩余元素。

  (2)clip属性能设置元素的形状。该属性用于定义一个剪裁矩形,矩形内的内容才可见,矩形外内容和“overflow:hidden”的效果相同。剪裁区域会比元素的内容区大,也有可能比内容区小。

  (3)clip属性值:autorect(top,right,bottom,left)

  注意:auto表示不裁切,rect中的上右下左四个方向填入的应该是数值,指的是裁切的位置。

  (四)实例

  如图示,先准备一张尺寸是159px*99像素的图,利用clip属性把图片裁切,只显示图中的大红点。

  制作一个放置图片的CSS定义如下的div外框:

clip属性_css教程_css基础_编程学习网

  div的定位属性设置为相对定位是为了使图片把它当作定位标准,为了让显示效果更明显就把背景定义为#FFF985。

  再定义图片的裁切属性,CSS如下:

CSS定义

  绝对定位是相对于id为imgClip的div来说的,clip当中的数值要按照上右下左的顺序进行排列的。

  html代码:

html代码

  总结:这个属性定义了绝对定位对象可视区域的尺寸。一定要把position属性的值设置为absolute,这个属性才可以使用。我们编程学习网教育网站会给大家介绍更多关于考试认证、Web开发等等的内容,有兴趣的话可以关注一下。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     442人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     206人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     169人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     248人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     77人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯