首页
网页制作
网络编程
脚本专栏
数据库
网站运营
网络安全
平面设计
CMS教程
搜索
建站极客
网页制作
CSS
正文
clip 剪裁矩形实现代码
所属分类:
网页制作
/
CSS
阅读数: 1347
收藏 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命名参考
在XHTML中定义ID、CLASSS都用得上,主要是方面CSS定义样式时能一眼看穿。所以,CSS命名仅作参考。 (1)页面结构类 容器: container 页头:header 内容:content/container 页面主体:main 页尾:footer 导航:na
评论 0
收藏 0
赞 0
分享
CSS教程:控制网页文件大小通过精简CSS实现
尽管对于现如今的带宽来说,网页文件那仅以K来算的大小实在是微不足道,但如何将这以K来计算的网页文件精简到最小还是网页设计师们所应该考虑的问题之一。 众所周之,在不影响整个网页构架与功能的情况下,网页文件越小越好,因为更小的网页文件有利于浏览器对网页的解释
评论 0
收藏 0
赞 0
分享
CSS教程:关于文字溢出问题的研究
首先引起对这个溢出问题进行研究是因为看到一个朋友的帖子,里面提到ie7下出现的文字溢出问题; 于是又重新翻了以前怿飞斑竹的帖子,他提到的是注释引起的文字溢出问题,我今天看的时候发现在ie7下并没有产生多猪的问题(以前我没有装ie7,所以没有测试),今天看到这个新
评论 0
收藏 0
赞 0
分享
符合web标准的嵌入Flash的方法
常有网友提问,如何让网页中嵌入的Flash标签也符合web标准。目前还没有一个完美的解决办法,这篇文章中,我们将Flash嵌入标签写入js文件中,通过变量传递参数的办法来回避不符合标准的标签。 请注意,这只是一个变通的方法,换汤不换药,并未能最终解决存在的
评论 0
收藏 0
赞 0
分享
学习WEB标准必备的四项技能
今天在群里,熊猫君提议整理一个帖子,一方面为初学者提供一个入门指南,另一方面也象借此和已经在从事这个行业进行一点交流。下面是我从事这个行当多年的一些经验总结,希望抛砖引玉,大家不吝赐教。 1、必备工具 其实web标准并不是很复杂的技术,实现web标准的工具
评论 0
收藏 0
赞 0
分享
CSS对表格单元格强制换行和不换行
CSS控制Table单元格强制换行与强制不换行 我们知道Div的换行和不换行的css写法。但对于表格单元格只知道一个属性nowrap可以使其不换行。 近日有此需要,但发现加上nowrap在某些情况下还是会换行!无奈,没有一个强制不换行的方法吗? 用C
评论 0
收藏 0
赞 0
分享
CSS制作符合网站标准的细线表格
css教程:实现符合Web标准的细线表格 随着应用CSS网页布局构建网页, 以及web标准的广泛普及与发展, 表格渐渐被人们遗忘, 但是表格还是有它优秀的一面, 数据处理用表格的确省了不少麻烦! 这个是细表格的代码,并且通过了标准验证! tab
评论 0
收藏 0
赞 0
分享
区分IE6,IE7和firefox的CSS hack
这篇文章主要为介绍了CSS小技巧之有效区分IE6,IE7,Firefox,需要的朋友可以参考下
评论 0
收藏 0
赞 0
分享
CSS教程:用dl dt dd来制作列表
今天有人发邮件问的一个问题,最开始的想法是用ul列表来实现;但是这样用出现两个比较麻烦的地方: 1、如果用UL还布局,右边一栏比较麻烦; 2、文字外边的边框自适应比较麻烦; 3、很可能要定死高度; 所以,细细地看一看这个布局,想一想还是用DL.DT.DD作
评论 0
收藏 0
赞 0
分享
性感的CSS菜单(Menus)
当你需要一个简单易用的导航菜单得时候。CSSMenu是个不错的选择。相对于Flash/Javascript,他们小巧轻便,而且方便使用。当然,他们也能做出很多很漂亮的效果。 CssMenuExample 这里有几个专门收集CSS导航菜单的站点,其中有很多优秀的作品。也许能给
评论 0
收藏 0
赞 0
分享
查看更多
网络赚钱
更多
朋友圈被一条人贩消息刷屏:竟然是营销?
儿子网购Q币被骗 父亲怒找客服投诉又被骗
浅谈网络营销:从卖鸡蛋面的老板联想到个人站长
教育培训类网站的盈利模式
电脑系统下载类网站是怎么赚钱的?浅析电脑系统下载类网站的赚钱方式
谷歌广告怎么收款?光大银行需要携带资料到柜台办理
站长故事
更多
运用互联网思维的肉夹馍西少爷
浅析网站运营失败:你除了报怨还学会了什么
站长们,就别在折腾你的用户了
比较适合个人站长的5种类型网站:定位 坚持 收益
我认识的中国第一网民高春辉
就是这7个步骤 让我6个月做到了100万用户