Three ways to take screenshots with CSS

This article mainly shares three methods of CSS screenshots with you. It has good reference value and I hope it will be helpful to everyone. Let’s follow the editor to take a look, I hope it can help everyone.

Several ways to screenshot images with CSS

Original image:

• DIV Use background-position:

  #IMG Use clip: rect (upper left Y, lower right X, lower right Y, upper left X) with width and margin-top

<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>

Rendering:

• DIV+IMG Use margin attributes and overflow attributes to control

  <img  class="img1 lazy"  src="/static/imghwm/default1.png"  data-src="img/bk_title_all.jpg"    / alt="Three ways to take screenshots with 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

Rendering:

<p class="p_img">
        <img  class="img2 lazy"  src="/static/imghwm/default1.png"  data-src="img/bk_title_all.jpg"    / alt="Three ways to take screenshots with CSS" >
</p>
<style type="text/css">
 .p_img
    {   width: 550px;     
        height: 113px;     
        overflow: hidden;   
 }.img2
  {     margin: -599px 0 0 0;  }
 </style>

The above is the detailed content of Three ways to take screenshots with CSS. For more information, please follow other related articles on the PHP Chinese website!