首頁 > 文章 > web前端 > 三種CSS截圖的方法

三種CSS截圖的方法

零到壹度原創: 2018-03-19 11:29:544262瀏覽

本文主要為大家分享三種CSS截圖的方法，具有很好的參考價值，希望對大家有幫助。一起跟著小編過來看看吧，希望能幫助大家。

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>

效果圖：
三種CSS截圖的方法

三種CSS截圖的方法

三種CSS截圖的方法 IMG 使用clip: rect（左上Y 右下X 右下Y 左上X）搭配width與margin-top

  <img  class="img1" src="img/bk_title_all.jpg" / alt="三種CSS截圖的方法" >
      <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

### 效果圖：######## ###########DIV+IMG 使用margin屬性和overflow屬性控制#########

<p class="p_img">
        <img  class="img2" src="img/bk_title_all.jpg" / alt="三種CSS截圖的方法" >
</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>
    <img  class="img1" src="img/bk_title_all.jpg" / alt="三種CSS截圖的方法" >
    <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">
        <img  class="img2" src="img/bk_title_all.jpg" / alt="三種CSS截圖的方法" >
    </p></body></html>

### ###

以上是三種CSS截圖的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：淺談DIV+CSS的優缺點下一篇：淺談DIV+CSS的優缺點

看更多