CSS布局教程

基于web标准的网站设计指南

« 图片翻转链接CSS选择符的命名 »

使用div强制剪切图片

    在关于段落排版时曾经谈到过overflow属性,使用overflow:hidden,的对象将强制不显示对象中超过对象范围的内容。在图像剪切的技术上不妨利用这样一个非常实用的属性来帮助我们改进剪切方式。首先我们需要一个对象来放置我们的图片,不妨为一个緲,改进后的XHTML代码如下:使用div对象将图像对象放置其中,overflow属性是针对对象中的内容发生作用,因此需要dh4b作焚为对象载体,我们的css土代码将对div进行编写:预览一下实际效果,图像的右赴和下边已经被剪切掉了,天津网站建设天津网站制作,图像尺寸已经做到了与上例相同的尺寸。不过惟一的区别是,目前的图像剪切是以左中角为固定点进行剪切的,有没有可能同clip一样实现对指定区域的剪切呢?大家应该还记得在前面经常使用的margin属性,margin属性帮助我们设置对象与容器的间距,不妨将边距设置为负值,以帮助我们将对象位移到想要的位置,继续改进CSS代码,我们为图像也增加一套CSS样式编码:令图像使用clip时左和上的数值均使用了20px lOpx,在这里也完成同,使用负数的-20px, -lOpx;再次预览最终效果。已经同上例一模一样了。而且在这种况下可以便div带上边框及其他属性帮助我们完善图像显示的效果。对于使用div强制切而言,图像的显示区域实际上被放置在了div之外不被显示,利用这种特性,在页面设讨中可以经常使用到overflow:hidden;的方式,帮助我们显示需要显示的范围。
使用elb,能够解决我们对图像或是对象的剪切问题,不过也引发了另一个问题,使用cli9属性必须使对象的定位方式由标准模式转为positi叫:曲solute;即对象发生绝对定位。如果是这样的话有可能在对象的布局上影响原先的排版。在实际应用中我曾碰到另一个问题,如果需要对图像加border边框、增加边框后再使用clip剪切的话,所加的边框也被算入了剪切范围使图像没有border边框。为了解决这个问题,可以使用另一种途径来实现剪切。

  • 相关文章:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

日历

最新评论及回复

最近发表

Powered By Z-Blog 1.8 Arwen Build 90619

Copyright www.zxh6655.cn. Some Rights Reserved.黑ICP备09093629号