Jie

心若无尘,一花一世界,一鸟一天堂;心若静,已如涅磐,风声物语,皆可成言.
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

CSS剪切图片

Posted on 2008-11-23 15:54  JieNet  阅读(4614)  评论(1编辑  收藏  举报

 

示例图片:width:197px   height:87px

             

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    
<title>CSS剪切图片</title>
    
    
<style type="text/css"> 
        #img1 
{ 
              position
:absolute; 
              clip
:rect(30px 80px 60px 20px); 
        
} 
    
</style> 
    
</head>

<body>

示例图片:Width:197px,Height:87px;
<br />
<img src="DemoImage.jpg" alt="demo img" />
<hr />
<pre>
<b>使用clip剪切"谷歌"两个字 </b>
        语法:
            clip:auto|rect( number number number number )
            clip:rect(30px 80px 60px 20px);
            clip:rect( 上   右   下   左 );
            
        说明:此属性定义了绝对(absolute)定位对象可视区域的尺寸。必须将 position 属性的值设为 absolute ,此属性方可使用。
        
<img id="img1" src="DemoImage.jpg" alt="demo img" />
<pre/>
</body>
</html>