现在的位置: 首页 > 综合 > 正文

CSS剪切图片

2013年03月09日 ⁄ 综合 ⁄ 共 743字 ⁄ 字号 评论关闭

 

示例图片: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>

抱歉!评论已关闭.