三种CSS截图的方法

2020-11-27 来源：星星旅游

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

全部栏目

三种CSS截图的方法

CSS截图图片的几种方式