首页
网页制作
网络编程
脚本专栏
数据库
网站运营
网络安全
平面设计
CMS教程
搜索
建站极客
网页制作
CSS
正文
clip 剪裁矩形实现代码
所属分类:
网页制作
/
CSS
阅读数: 1314
收藏 0
赞 0
分享
一、clip属性必须和定位属性postion一起使用才能生效。
二、clip裁切的计算坐标都是以左上角即(0,0)点开始计算,如图三所示,这点不像padding和margin,它们两个的右边距和下边距是从最右边和最下边开始计算的。
clip属性设置元素的形状。这个属性用于定义一个剪裁矩形。在这个矩形内的内容才可见,出了这个剪裁区域的内容和 overflow:hidden 的效果相同。剪裁区域可能比元素的内容区大,也可能比内容区小。
clip属性值:auto | rect (top, right, bottom, left)
auto代表不裁切,rect中的上右下左四个方向填入的应是数值,表示裁切的位置。
<style type="text/css">#Clip { position:relative; width:159px; height:99px; background:#FFF985; margin:0 auto; }#Clip img { position:absolute; clip:rect(21px 68px 51px 38px);}</style><div id="Clip"> <img src="https://cdn.zhanzhang360.cn/imgupload/004599/2009090312513664.jpg" width="159″ height="99" /></div>
提示:您可以先修改部分代码再运行
div的定位属性设置为相对定位是为了让图片以它为定位标准,将背景定义为#FFF985是为了让显示效果更明显。
图片的绝对定位是相对于id为Clip的div而言的,clip中的数值按照上右下左的顺序排列的。
更多精彩内容
其他人还在看
CSS去除移动端点击时元素产生的背景色 (推荐)
这篇文章主要介绍了CSS去除移动端点击时元素产生的背景色 (推荐),代码很简单,需要的朋友跟随小编一起看看吧
评论 0
收藏 0
赞 0
分享
详解CSS Sprite雪碧图的应用
这篇文章主要介绍了详解CSS Sprite雪碧图的应用,CSS雪碧图该方法是将多个小图标和背景图像合并到一张图片上,非常具有实用价值,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
css和html的四种结合方式
这篇文章主要介绍了css和html的四种结合方式,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
CSS3 Flex 弹性布局实例代码详解
这篇文章主要介绍了CSS3 Flex 弹性布局实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
评论 0
收藏 0
赞 0
分享
纯css3实现思维导图样式示例
思维导图又称之为脑图,本篇文章主要介绍了使用css3实现思维导图样式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
使用CSS属性选择器来拼接HTML的DNA的方法
CSS属性选择器非常神奇,它们可以帮你避免添加数不胜数的类名,从另一方面来指出你代码里的一些问题。接下来通过本文给大家介绍使用CSS属性选择器来拼接HTML的DNA的方法,需要的朋友参考下吧
评论 0
收藏 0
赞 0
分享
css文本两端对齐的实现代码
这篇文章主要介绍了css文本两端对齐的实现代码,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
CSS多级菜单的实现代码
这篇文章主要介绍了CSS多级菜单的实现代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
CSS未知高度垂直居中的实现
这篇文章主要介绍了CSS未知高度垂直居中的实现,详细的介绍了几种方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
CSS 、JS实现浪漫流星雨动画
这篇文章主要介绍了CSS 、JS实现浪漫流星雨动画的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
评论 0
收藏 0
赞 0
分享
查看更多
网络赚钱
更多
网上赚钱怎么赚钱?网上兼职的方法有哪些
儿子网购Q币被骗 父亲怒找客服投诉又被骗
网赚感悟:网站为什么不赚钱?网赚没你想的那么简单
站长故事实战:淘宝买关键词排名SEO服务攻略介绍
个人站长经常做的国内广告联盟
主观臆断,百度联盟审核的条件
站长故事
更多
站长故事:一个80后妈妈的微商之旅
小米、华为互喷的背后:互相吃翔的GDP!
某个人站长怎么用交友网站年赚80万的
站长们,就别在折腾你的用户了
站长做好以下三个步骤 长期盈利不是难事
就是这7个步骤 让我6个月做到了100万用户