当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS 样式 层裁剪图片

CSS样式表
Webjx收集基于CSS+JS设计50款优秀的导航菜单
初学者简单学习CSS网页布局
CSS教程:一张图片实现圆角
基于CSS的网站导航菜单
CSS新特性:圆角边框多栏Gird布局背景设置
CSS实例教程:制作网页特殊产品列表
收集国外网站的25个CSS高级教程
CSS教程:制作圆角矩形的网站头像
网页推荐值得一看的CSS框架
有趣图例:你是一个网页设计师吗?
安装Firefox的Jetpack扩展的步骤
CSS教程:CSS制作3D立方体
Css教程:FireFox正常IE错位的绝对定位元素
CSS对IE6、IE7、IE8支持详细的易用的参考
CSS Sprites简介以及优缺点
CSS教程:避免使用滤镜
DIV+CSS佈局代码精简对SEO的影响
学习CSS需要知道的CSS基础知识
CSS教程:clip属性全知道
基于firebug的firefox扩展:css usage

CSS样式表 中的 CSS 样式 层裁剪图片


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-11   浏览: 82 ::
收藏到网摘: n/a


代码如下:

<div style="width: 800px; height: 100px; overflow: hidden;">
<img style="margin-top:-25px;" src="http://www.bjxxd.com/school/images/hult.jpg" alt="hult" />
</div>

原图:

代码如下:

<div style="width: 800px; height: 100px;">
<img src="http://www.bjxxd.com/school/images/hult.jpg" alt="hult" />
</div>
overflow: hidden //这个样式是说,如果图片宽,高都超过了div的高宽,超出的部分就隐藏
margin-top:-25px //把图片高度裁剪掉25px