CSS tutorial: complete answers to clip attributes

Clip is a useful property, but it is often rare and rarely introduced in practical applications. Note the following two points for applying the clip attribute:

1. the clip attribute must be used with the positioning attribute postion to take effect.

2. The coordinates of clip cropping are calculated from the upper left corner (0, 0), as shown in Figure 3. Unlike padding and margin, the right margin and bottom margin of the two are calculated from the rightmost and bottom.

Basic Syntax of clip attributes:

Clip: auto rect (number)
Valid value:
Auto: default value. No object cut
Rect (number): provides four offset values calculated from the (0, 0) coordinate in the upper-right-bottom-left order of the object, any value can be replaced by auto, that is, this edge is not cut.

Clip attribute description:

Retrieves or sets the visible area of an object. The parts outside the visible area are transparent.

This attribute defines the size of the visible area of the absolute (absolute) Positioning object. You must set the value of the position attribute to absolute. This attribute can be used only.

This attribute is available on MAC platform since IE5.

The corresponding script feature is clip.

In addition to color text, clip attributes in CSS can effectively crop elements in other webpages.

Set the shape of the element in the clip attribute. This attribute defines a cropped rectangle. The content in this rectangle is visible, and the content in this cropping area is the same as that in overflow: hidden. The cropping area may be larger or smaller than the content area of the element.

Clip property value: auto rect (top, right, bottom, left)

Auto indicates no cropping. The top-right, bottom-right, and left-left directions in rect indicate the cropping position.

Below is a simple example of cropping images.

First, prepare an image, as shown in the middle. Its size is 159px * 99 pixels. I plan to crop the image by using the clip attribute, and only display the large red dot in the graph.

I will first create a div box for placing an image. Its CSS definition is as follows:

#imgClip { position:relative; width:159px; height:99px; background:#FFF985; margin:0 auto; }

The positioning attribute of this div is set to relative positioning to enable the image to take it as the positioning standard, and the background is defined as # FFF985 to make the display effect more obvious.

Then define the cropping attribute of the image. CSS is defined as follows:

# ImgClip img {
Position: absolute;
Clip: rect (21px 68px 51px 38px );
}

The absolute position here is relative to the div whose id is imgClip. The values in clip are arranged in the order of top right and bottom left.

Html code:

＜div id="imgClip"> 
＜img src="http://myarticle.enet.com.cn/images/2011/0504/1304490060130.jpg" width="159" height="99" /> 
＜/div>