clip剪切图片示意图
假设原图片的宽度高度500 × 375 (px)
<html>
<head>
<style type="text/css">
<!--
img {
position:absolute;
clip:rect(20px 400px 210px 200px);
}
-->
</style>
</head>
<body>
<img src="http://photo7.yupoo.com/20070428/081241_1280937036.jpg" width="500" height="375" />
</body></html>
<!--clip用法说明:
clip
剪切的原理:实际上就是定位"剪切线"的位置,然后从"剪切线"处剪开,保留剪切线封闭的边框内的图片,剩下来的就是处理后的图片。图片不会发生缩小和放
大,只是4个边缘被不同程度的剪掉。("剪切线"是形象的说法,相当于平时剪纸时定位的"虚线",这个虚线就是要用剪刀剪断的地方。"剪切线"就相当于这
里的要剪的"虚线"。把四周的虚线剪开,就得到一个新的图片,而这种虚线至少有一条。最多有4条,分别叫上虚线、右虚线、下虚线、左虚线。上虚线距离图片
上边缘为20px;下虚线距离图片上边缘为210px;右虚线距离图片左边缘为400px;左虚线距离图片左边缘为200px。然后从虚线处剪开,虚线内
的图片,即为显示的图片。该图片被clip剪切后不会产生左右移动,上下也不会移动。图片也不会缩放。
clip:rect(上边 右边 下边 左边)
clip:rect(20px 400px 210px 200px);
clip:rect(0 400px 210px 0);定位右虚线和下虚线剪切图片的右边和下边
clip:rect(100px auto auto 200px);剪图片的上边和左边
clip:rect(0 400px auto 0);只剪图片的右边,可以用来控制图片的宽度,而不缩放图片,特别是大图
测试表明:火狐和谷歌浏览器也支持这个clip属性和值
■要结合position:absolute;使用,用来修饰img元素
分享到:
相关推荐
CSS布局 案例详解 CSS布局 案例详解 CSS布局 案例详解CSS布局 案例详解 CSS布局 案例详解
CSS之Position详解 CSS的很多其他属性大多容易理解,比如字体,文本,背景等。有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍,而偏偏忽略了对一些难缠的属性讲解,有避重就轻的嫌疑。CSS中主要难以理解的...
主要介绍了CSS中clip-path属性的使用详解,clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域。非常具有实用价值,需要的朋友可以参考下
主要介绍了java图片滑动验证(登录验证)原理与实现方法,结合实例形式详细分析了java图片滑动登录验证的相关原理、实现方法与操作技巧,需要的朋友可以参考下
详解css定位与定位应用,很棒的指南哦,让你知道css如何定位
CSS浮动属性Float详解 什么是CSS Float?
详解CSS选择器标签HTML 选择器 类别CLASS 选择器
刷新 QQ 空间动态时,发现一则广告,随着用户上下滑动动态列表,就会自动切换广告图片,这样的效果对移动端本就不大的屏幕来说,无疑是很精妙的考虑,这样的效果是怎么实现的呢? 接下来就说说这个效果的具体实现...
CSS 详解,包括规则,属性等。
git的原理详解和实用指南,是开发的实际经验终结与提炼。
HTML+CSS+JavaScript实用详解HTML+CSS+JavaScript实用详解HTML+CSS+JavaScript实用详解
background 简写属性,作用是将背景属性设置在一个声明中。 background-attachment 背景图像是否固定或者随着页面的其余部分滚动。Scroll随文滚动 background-color 设置元素的背景颜色。 ...
详解电动车控制器结构原理与维修docx,详解电动车控制器结构原理与维修
固定背景图片的通常方法就是把background-attachment设成fix,进一步的话自然则是用background-position,下面来详解使用CSS固定页面背景图片及位置的方法:
有了这个就可以搞定很多事情 在“CSS规则对话框”中,我们可以通过类型、背景、区块、方框、边框、列表、定位和扩展项的设置,来美化我们的页面,当然啦,我们在定义某个...还有【CSS定位详解之绝对定位和相对定位】哦
关于DIV与CSS技术详细说明,PHP开发技术的必需品。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
DIV+CSS布局:CSS浮动float属性详解 不解释
selenium css selector 定位详解
详解透视原理