Core tip:clip attribute is a useful attribute, but often in practical applications, and rarely, the introduction is very few.
Clip attribute is a more useful attribute, but it is often used in practical applications, and it is seldom introduced. Two points to note when applying the clip property:
The clip property must be used in conjunction with the positional property postion to take effect.
Second, the clip of the calculation coordinates are calculated in the upper left corner that is (0,0) point, as shown in Figure three, this is not like padding and margin, their two right and bottom margin is from the rightmost and the bottom of the calculation.
Clip Property Base Syntax:
Clip:auto Rect (number number number number)
Take value:
Auto: Default value. Object without clipping
Rect (number number number number): Provides 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, the 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 is clip.
In addition to making color text, the Clip property in CSS can effectively trim elements in other pages.
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 value: Auto Rect (top, right, bottom, left)
Auto representative is not trimmed, rect in the upper right and lower left four directions should be a numeric value, indicating the position of the cut.
Let me give you a simple example of cutting the picture.
First you prepare a picture, as shown in figure one, which is of 159px*99 pixel size. I'm going to use the clip attribute to trim the picture, just to show the red dots in the picture.
Let me first make a div box that places the picture, and its CSS is defined as follows:
<textarea class="sourcecode" readonly="" name="__sourcecode__">#imgClip {position:relative; width:159px; height:99px; Background: #FFF985; margin:0 Auto; }</textarea>
The div's positioning attribute is set to relative positioning in order for the image to be positioned as a standard, and the background is defined as #fff985 to make the display more visible.
Then define the trim properties of the picture, which are defined as follows:
#imgClip img {
Position:absolute;
Clip:rect (21px 68px 51px 38px);
}
The absolute positioning here is relative to the ID imgclip Div, and the values in the clip are arranged in the order of the upper right and lower left.
HTML code:
<textarea class="sourcecode" readonly="" name="__sourcecode__"><div id= "Imgclip" > <br/> <br/></div></textarea>
