监理网站建设价格多少,网站开发教程视频,dw制造网站log怎么做,南宁网站建设是什么意思CSS中有一个属性叫做clip#xff0c;为修剪#xff0c;剪裁之意。配合其属性关键字rect可以实现元素的矩形裁剪效果。此属性安安稳稳地存在于CSS2.1中#xff0c;且使用上基本上没有类似于max-height/display:table-cell等浏览器的兼容性问题。
根据Dreamweaver的自动提示为修剪剪裁之意。配合其属性关键字rect可以实现元素的矩形裁剪效果。此属性安安稳稳地存在于CSS2.1中且使用上基本上没有类似于max-height/display:table-cell等浏览器的兼容性问题。
根据Dreamweaver的自动提示clip有如下可用属性关键字就顺序上而言top → right → bottom → left在CSS中是统一相承的就像是margin的四个值的顺序border-width等等的四个值顺序——从头顶上开始顺时针旋转的说~~不过这里的四个值是不可以缩写的。
其中top right bottom left表示各个位置的属性值就像是width:200px;中的200px所以我们会有类似下面的使用
rect(30px 200px 200px 20px)那这里的top right bottom left究竟指什么的我们该如何理解呢
其实是这样的top right bottom left分别指最终剪裁可见区域的上边右边下边与左边。而所有的数值都表示位置且是相对于原始元素的左上角而言的。于是
rect(30px 200px 200px 20px)表示的含义就是最终剪裁的矩形的上边距离原始元素的上边缘30像素剪裁矩形的右边缘距离原元素左边缘的距离是200像素剪裁矩形的下边缘距离原元素顶部的距离为200像素剪裁矩形的左边缘距离原元素左边缘的距离时20像素。
上面的表述又长有啰嗦又难以理解你可以这样想象饥饿N天的你突然面前出现了块香喷喷的大大的300厘米*300厘米方形手抓饼你拔出自己随着携带的锋利的日本刀在距离顶部30厘米的地方咔嚓一刀然后在距离左边200厘米的地方咔嚓一刀然后又以迅雷不及掩耳的速度在距离顶部200厘米和距离20厘米的地方咔嚓一刀。啪啪四刀留下的中间的那块就是剪裁的内容了。所以您可以将top right bottom left理解为在这些位置拿大刀咔咔修剪。
或者理解为在photoshop中为大背景建四个方向的参考线如下图300像素*300像素所示所谓“一图胜千言千言不敌一实例”。为了更加直观的理解clip:rect后面四个值的含义我专门做了个demo页面。您可以狠狠地点击这里CSS clip:rect几个值含义示意demo
在demo页面中我已经将4个值分离出来了您任意修改其中的一个值页面上就会出现半透明的黑色层示意这部分内容是将会被剪裁掉的。例如我们修改第一个值为30如下图失去焦点后就会看到图片上出现了改值对应的剪裁作用区域类似的我们修改各个框框的值为30 200 200 20这时图片上的效果就是其中图片中未被黑色半透明层覆盖的区域就是最后的剪裁区域您可以点击下面的“剪裁”按钮确认剪裁结果就如下图所示您也可以修改其他值做测试的。如果最后图片全部被半透明层覆盖那么图片最后会被剪裁到一点不剩。
最后有必要说明下clip:rect矩形剪裁只能作用于position:absolute的元素上。
三、clip:rect矩形剪裁的一些应用介绍
1. 可用性隐藏根据上面对top right bottom left的释义如果left right或者bottom top则元素会被完全裁掉而不可见即“隐藏”。通过这种方式隐藏的元素是可以被屏幕阅读器等辅助设备识别的从而提高了页面的可用性。
例如
clip: rect(1px 1px 1px 1px); /*left right, bottom top*/或
clip: rect(10px 10px 10px 100px); /*left right*/或
clip: rect(100px 10px 10px 10px); /*bottom top*/等正所谓小手抖一抖剪裁有木有。//zxx:上面几个值的效果您可以去part2部分所提供的demo页面做测试滴。
2. img标签下的CSS Sprite定位为了节约图片资源我们经常会把小图片整合到一张图片上称为图片合并技术国外称为CSS Sprite含“精灵”之意。然后利用元素区域外background内容不可见的特性配合background-position定位实现图片的精确显示。
就连万万不能没有的钱都不是万能的显然background-position下的CSS Sprite定位也不可能适用于各种情况。例如有时我们希望Sprite图片可以延迟滚动加载或者是可以很轻松的右键图片另存为...或者是某些特殊的background-position属性不起作用的情况。
例如众所周知的IE6浏览器不支持Alpha透明通道的png图片会有蓝蓝的背景例如下图所示
我们可以使用filter滤镜修复这一问题。然而如果该png图片以background-image的形式滤镜透明化的话是不支持background-position定位的也就是我们不可能在IE6下使用background属性实现png图片的Sprite定位。此时要想实现IE6下png图片的Sprite定位只能在页面上完成使用img标签而非background-image属性。
然后img标签下的图片是不会像background-image一样元素区域外部分自动隐藏所以我们需要借助某些手段对齐进行裁剪此时clip:rect就派上用场了。
您可以狠狠地点击这里clip:rect下png图片Sprite定位demo
demo页面中的沙发png图片完整显示如下
如果您手头上的浏览器为IE6浏览器则打开demo页面会看到如下效果
可以看到鼠标移上去后是有Sprite定位切换实现的hover效果
可以看到为应用透明滤镜的情况下使用img标签配合clip:rect轻松实现了Sprite图片的hover切换效果。这在background属性中也能实现OK现在点击下面的“IE6 png透明按钮”应用AlphaImageLoader透明滤镜然后再鼠标经过结果也是可以实现hover效果的见下图
CSS代码如下
.clip_a{display:block; width:128px; height:128px;}
.clip_a img{border:0; position:absolute; clip:rect(0 128px 128px 0);}
.clip_a:hover{border:0;}
.clip_a:hover img{margin-top:-128px; clip:rect(128px 128px 256px 0);}由此可见CSS Sprite的定位不仅仅可以使用background属性在页面上使用img标签配合clip:rect剪裁也是可以轻松实现定位效果的。
3. 图片剪裁的预览效果关于图像剪裁很早前我曾翻译过一个名为Jcrop的jQuery插件文章名为“jQuery照片图像剪裁插件Jcrop中文翻译详解”其中有个demo是含有剪裁预览效果的您可以轻轻地点击这里访问。
里面的剪裁预览采用margin定位有着较为复杂的计算。
实际上像剪裁预览效果显示用剪裁属性来实现是最合适的了。于是自己利用自己先前写的原生态的“图片旋转剪裁js插件”中的zxx.crop_rotation.js写了个图片剪裁预览效果demo。
您可以狠狠地点击这里clip:rect图片剪裁效果demo
demo页面中的旋转可以直接当空气移动拖动示意区域就会在右侧看到对应的剪裁预览效果
