三种CSS截图的方法

程序员文章站 2022-05-03 23:35:59

...

本文主要为大家分享三种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截图的方法

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

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

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>

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

完整版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>

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

三种CSS截图的方法

CSS截图图片的几种方式

JavaScript使用三种方法定义函数的实现代码分析

tensorflow三种模型的加载和保存的方法（.ckpt，.pb，SavedModel)

php实现递归的三种方法实例

PHP针对常规模板引擎中与CSS/JSON冲突的解决方法

当把宽度设为25%时，其他浏览器正常，IE7图片会掉下来，有没有好的解决方法_html/css_WEB-ITnose

DIV+CSS三列式布局的实现方法_html/css_WEB-ITnose

HTML页面3秒后自动跳转的三种常见方法详解

css3 伪对象选择器添加几何图形文字的方法

IE6兼容inline-block的方法_html/css_WEB-ITnose

Java使用三种方法实现高并发锁的示例代码