Three ways to capture CSS

This article is mainly for you to share three kinds of CSS methods, with a good reference value, I hope to be helpful to everyone. Follow the small series together to see it, hope to help everyone.

CSS pictures in several ways

Original:

• DIV uses BACKGROUND-POSITION:XPX ypx (upper left corner coordinates) with width and 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 uses Clip:rect (upper left y right lower x right lower y x) with width and margin-top

        <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 using the Margin property and the overflow property to control

<p class= "p_img" >        </p><style type= "text/ CSS ">. p_img    {   width:550px;             height:113px;             Overflow:hidden;    }. Img2  {     margin: -599px 0 0 0;  } </style>

：

The full version of HTML is as follows: <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">