CSS Tutorial: Clip Property Full Answer

The

Clip property is a useful property, but it is often rare in practical applications, and webjx.com is rarely introduced. Two points to note when applying the Clip property:

A, the clip property must be used with the positional property postion to take effect.

Two, clip the calculated coordinates are computed in the upper-left corner (0,0), as shown in figure three, unlike padding and margin, where the two right and bottom margins are computed from the far right and bottom.

Clip Property base syntax:

Clip:auto Rect (number number number number number)
Value:
Auto: Default value. Object without clipping
Rect (number number number number): Provides the four offset values computed from the upper-left corner of the object (0,0) in the upper-right-left order, where any of the values can be replaced with auto, that is, this edge does not cut

Clip Property Description:

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

This property defines the dimensions of an absolute (absolute) anchored object's viewable area. The value of the Position property must be set to absolute, which can be used by this property.

This property is available on the Mac platform since IE5 started. The corresponding script attribute for

is clip. The clip property in the

CSS can effectively trim elements in other pages, in addition to making colored text. The

Clip property sets the shape of the element. This property is used to define a clipping rectangle. The content in this rectangle is visible, and the contents of this clipping area are the same as the Overflow:hidden effect. The clipping area may be larger than the content area of the element, or it may be smaller than the content area.

Clip Property values: Auto Rect (top, right, bottom, left)

Auto is not trimmed, rect in the lower left four directions should fill in the numeric value, indicating the position of the trim.

Let me give you a simple example of cutting a picture. The

prepares a picture first, as shown in figure one, and its dimensions are 159px*99 pixels. I'm going to use the clip attribute to trim the picture, just to show the red dots in the picture.

I first make a placement pictureThe DIV outer box, its CSS definition is as follows:

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

The Location property of this div is set to relative positioning in order for the picture to be positioned as a standard, and the background is defined as #fff985 to make the display more visible.

and then define the trim properties for the picture, and the CSS is defined as follows:

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

The absolute positioning here is relative to a div with an ID of imgclip, and the values in the clip are listed in the order of the upper right and lower left.

HTML code: