Rumah > Artikel > hujung hadapan web > 三种CSS截图的方法

三种CSS截图的方法

零到壹度asal: 2018-03-19 11:29:544313semak imbas

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

Atas ialah kandungan terperinci 三种CSS截图的方法 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：浅谈DIV+CSS的优缺点Artikel seterusnya：css实现图片未加载完成时占位显示实例分享

Artikel berkaitan

Lihat lagi