三種CSS截圖的方法

最後更新：2018-03-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文主要為大家分享三種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

  <img class="img1" src="img/bk_title_all.jpg" />      <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" /></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" />    <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" />    </p></body></html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More