三种CSS截图的方法

零到壹度

发布： 2018-03-19 11:29:54

原创

4579人浏览过

本文主要为大家分享三种CSS截图的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧，希望能帮助到大家。

CSS截图图片的几种方式

原图：
这里写图片描述

DIV 使用background-position：Xpx Ypx (图片左上角坐标) 配合width和height

<p class="p_bg"></p>
<style type="text/css">
   .p_bg
        {           
         width: 550px;     
         height: 113px;     
         background-image: url(img/bk_title_all.jpg);  
         background-repeat: no-repeat;       
         background-position: 0px -599px;  
}</style>

登录后复制

效果图：
这里写图片描述

IMG 使用clip: rect（左上Y 右下X 右下Y 左上X）配合width和margin-top

  @@##@@
      <style type="text/css">
        .img1
        {  
            width: 550px;   
            background-image: url(img/bk_title_all.jpg);      
            clip: rect(599px 550px 712px 0px);      
            position: absolute;       
            margin-top: -599px;        }
       </style

登录后复制

效果图：
三种CSS截图的方法

立即学习“前端免费学习笔记（深入）”；

DIV+IMG 使用margin属性和overflow属性控制

<p class="p_img">
        @@##@@
</p>
<style type="text/css">
 .p_img
    {   width: 550px;     
        height: 113px;     
        overflow: hidden;   
 }.img2
  {     margin: -599px 0 0 0;  }
 </style>

登录后复制

效果图：
这里写图片描述

完整版Html如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
    <title>Untitled Page</title>
    <style type="text/css">
        .p_bg
        {            width: 550px;            height: 113px;            background-image: url(img/bk_title_all.jpg);            background-repeat: no-repeat;            background-position: 0px -599px;        }

        .img1
        {            width: 550px;            background-image: url(img/bk_title_all.jpg);            clip: rect(599px 550px 712px 0px);            position: absolute;            margin-top: -599px;        }
        .p_img
        {            width: 550px;            height: 113px;            overflow: hidden;        }
        .img2
        {            margin: -599px 0 0 0;        }
    </style></head><body>
    <h1>
        原图</h1>
    <p style="width: 550px; height: 831px; background: url(img/bk_title_all.jpg);
        background-repeat: no-repeat;">
    </p>
    <hr />
    <h1>
        p        <br />
        <span style="color: Red;">使用background-position：Xpx Ypx (图片左上角坐标) 配合width和height</span>
    </h1>
    <h2>
        background: url(img/bk_title_all.jpg); width: 550px;<br />
        width: 550px;<br />
        height: 113px;<br />
        background-repeat: no-repeat;<br />
        background-position: 0px -599px;    </h2>
    <p class="p_bg">
    </p>
    <hr />
    <h1>
        IMG        <br />
        <span style="color: Red;">使用clip: rect（左上Y 右下X 右下Y 左上X） 配合width和margin-top</span>
    </h1>
    <h2>
        img src="img/bk_title_all.jpg"        <br />
        clip: rect(599px 550px 712px 0px);<br />
        position: absolute;<br />
        width: 550px;<br />
        margin-top: -599px;    </h2>
    @@##@@
    <br />
    <br />
    <h1 style="margin-top:100px;">
        p+IMG        <br />
        <span style="color: Red;">使用margin属性和overflow属性控制</span>
    </h1>
    <h2>
        <h3>p</h3>
        width: 550px;<br />
        height: 113px;<br />
        overflow: hidden;<br />
        <h3>IMG</h3>
        margin: -599px 0 0 0;<br />
    </h2>
    <p class="p_img">
        @@##@@
    </p></body></html>

登录后复制

以上就是三种CSS截图的方法的详细内容，更多请关注php中文网其它相关文章！