CSS Clip:rect Rectangle clipping function and some application introduction

There is a property in CSS called clip, which is intended for trimming and clipping. With its property keyword rect, you can implement the rectangle clipping effect of the element. This property is peacefully in CSS2.1, and there is basically no compatibility issue with browsers such as Max-height/display:table-cell. However, it seems that this property is seldom used by people. I summed up three reasons: the first is the understanding of some threshold, and the other people do not use much; third, there are many alternatives to this property's functional effect. This kind of state is similar to ordinary computer users using the XP system is very good, and then let him use the Mac system, it may be because of the use of unaccustomed, other people do not use, functional XP system basically have and support a broader and back to the XP system. In fact, what kind of operating system is better? I think it goes without saying. So, we use overflow to achieve a blunt tailoring and native clip tailoring is somewhat similar to the use of XP system and Mac. To be honest, I didn't use a lot of myself, and I learned and used this attribute only two years ago to solve some special problems in a real project. Last month's "CSS relative/absolute (Relative/absolute) positioning series (iii)" article in the usability of the hidden part of the application of this attribute, its role is the usability of the page element is hidden, the relevant CSS code is as follows:. Hidden{position: Absolute;clip:rect (1px 1px 1px 1px); /* IE6, IE7 */clip:rect (1px, 1px, 1px, 1px);} According to my own test, it seems that the third line of CSS above is superfluous. However, there is a reason for this, but I do not think of a reason, but also look at others to guide the maze. "The United States of America, not the usual way", because it seems that everyone has ignored the clip attribute, so I decided to dig a little bit of the properties of the clip, so that everyone began to focus on and familiar with this property. Incidentally, this is not a call to care about the Chinese pastoral dog This gimmick ingredient a lot of things, but really in the actual project can be a great place to shine. Ii. Clip:rect Properties Intimate contact based on Dreamweaver automatic hints, clip has the following available property keywords: wherein, it is said that the inheritance of Inheritie browser is not supported, so this property is a soy sauce Emperor, and then "Auto" is not cut the meaning, In addition to resetting the role of Rect, it is also a vice-emperor of soy sauce, so the real face of the table is the rect (top right bottom left), so we only discuss the rect (top right bottom left) this fellow. In terms of order, Top→right→bottom→left, in CSS is unified, like the order of four values of margin, border-width, and so on four order of values--starting from the top, clockwise rotation of said ~ ~ But here the four values are not abbreviated. Where the top right bottom left represents the property values for each location, like the width:200px 200px, so we'll have something like the following to use:

Rect (30px 200px 200px 20px)

So what's top right bottom? How do we understand that? In fact, the top right bottom left refers to the top of the visible area of the final clipping, and the lower and bottom side. All values represent positions and are relative to the upper-left corner of the original element. So

Rect (30px 200px 200px 20px)

The implication is that the top edge of the final trimmed rectangle is 30 pixels from the upper margin of the original element, and the right edge of the clipping rectangle is 200 pixels from the left edge of the original element, and the lower edge of the clipping rectangle is 200 pixels from the top of the original element, and 20 pixels from the left edge of the original element to the clipping rectangle. The above statement is long and difficult to understand, you can imagine: hungry n days you suddenly appeared in front of a piece of delicious big 300 cm * 300 cm square hand-caught cake, you pull yourself along with the sharp Japanese knife, in the distance from the top 30 centimeters a knife, Then, 200 centimeters to the left of the place to click a knife, and then at lightning speed at the top of the distance of 200 centimeters and a distance of 20 centimeters of a knife. The middle part of the four knife left is the cut. So, you can think of top right bottom left as trimming a broadsword in these positions. or understood as a reference line that builds four directions in Photoshop for a large background, such as (300 pixels *300 pixels): The so-called "a picture wins thousands of words, thousands of words are lost to an instance". For a more intuitive understanding of the meaning of the four values behind Clip:rect, I made a demo page. You can click here: CSS clip:rect several values meaning the demo in the demo page, I have separated the 4 values, you arbitrarily modify one of the values, the page will appear translucent black layer signal this part will be trimmed off. For example, we modify the first value to 30, such as: When you lose focus, you will see a clipping area corresponding to the change in the image: Similarly, we modify the values of each box to 30 200 200 20, when the effect on the picture is that the area where the image is not covered by the black translucent layer is the final clipping area, You can confirm the clipping by clicking on the "Trim" button below: The result is as follows: You can also modify other values to do the testing. If the final picture is all covered by a translucent layer, then the picture will be cropped to a point. Finally, it is necessary to note that the Clip:rect rectangle clipping can only be used on position:absolute elements. Three, Clip:rect rectangle cut some application introduction 1. Usability concealment based on the interpretation of the top right bottom left, the element will be completely cut off without being visible, or "hidden", if it >= right or bottom <= top. Elements that are hidden in this way can be identified by assistive devices such as screen readers, which improves the usability of the page. For example:

Clip:rect (1px 1px 1px 1px); /*left = right, bottom = top*/

Or

Clip:rect (10px 10px 10px 100px); /*left > right*/

Or

Clip:rect (100px 10px 10px 10px); /*bottom < top*/

And so on, the so-called small hands shaking a shake, cut have wood. ZXX: The effect of the above several values you can go to the demo page provided in the Part2 section to do the test drip. 2. CSS sprite positioning under IMG tag in order to save the image resources, we often integrate the small picture into a picture, called the picture Merge technology, called the CSS Sprite abroad, contains the meaning of "Genie". Then, the image can be displayed accurately by using the background of the content outside the element area and background-position positioning. Even the absolute cannot have the money is not omnipotent, obviously, background-position under the CSS sprite localization also cannot apply in each kind of situation. For example, sometimes we want sprite pictures to delay scrolling, or it can be easy to save a right-click picture as ... or some special background-position attribute does not work. For example, it is well known that the IE6 browser does not support the Alpha transparent channel PNG picture (which will have a blue background), as shown in: We can use the filter filter to fix the problem. However, if the PNG image is transparent in the form of background-image, background-position positioning is not supported, that is, we cannot use the Background property under IE6 to implement the sprite positioning of the PNG image. At this point, in order to achieve IE6 under the PNG image of the Sprite positioning can only be done on the page, using the IMG tag, not the Background-image attribute. Then, the image under the IMG tag is not automatically hidden as an element area outside the background-image, so we need to use some means to crop it, and Clip:rect is handy. You can click here: Clip:rect the PNG image in the sprite position Demodemo the full display of the sofa PNG image is as follows: If you have a browser on hand for the IE6 browser, Then open the Demo page will see the following effect: You can see the mouse moved up after the hover effect of the sprite positioning switch: You can see the application of transparent filters, using the IMG tag with Clip:rect easy to achieve the hover transition effect of the sprite picture. This can also be implemented in the background attribute, OK, now click the "IE6 PNG transparent button" below, apply alphaimageloader transparent filter, and then the mouse pass, the result can also achieve hover effect, see: CSS code is as follows:. clip_a{ Display:block; width:128px; Height:128px;}. Clip_a img{border:0; position:absolute; clip:rect (0 128px 128px 0);}. clip_a:hover{border:0;}. Clip_a:hover img{margin-top:-128px; Clip:rect (128px 128px 256px 0);} Thus, CSS sprite positioning can not only use the Background property, on the page using the IMG tag, with Clip:rect tailoring is also easy to achieve the positioning effect. 3. Picture clipping preview effect about the image clipping, I had previously translated a jquery plugin called Jcrop, the article called "jquery photo image clipping plugin jcrop Chinese translation in detail", one of which has a clip preview effect, you can click here to access. The trim preview in the inside uses margin positioning, which has a more complex calculation. In fact, it is most appropriate to use the trim preview effect as a clipping property. As a result, I wrote a picture clipping preview demo using the original "picture rotation + Cut JS plugin" that I wrote earlier. Zxx.crop_rotation.js. You can click here: Clip:rect picture clipping effect Demodemo the rotation in the page can be directly when the air, move, drag the schematic area, will see the corresponding clipping preview on the right side: this example is designed to demonstrate the potential of clip:rect, so the principle and use of a little, You are interested to refer to the above mentioned article, as well as the demo page related source code. Four, the tomb-sweeping day before the qingming season rain, the road pedestrians want to rains, looking at the weather like rain look. Return home tonight, worship the ancestors. Because the country did not install broadband, so today directly in the work time to toss this article, so the end may be slightly hasty. In addition, the qualification is limited, clip:rect research is not deep, so the text also inevitably has the expression of inaccurate places, welcome to correct, not very grateful.   The application examples of several clip:rect in this paper are purely for the sake of the particularity of its function, the clip attribute must have other more exquisite application, it depends on your wisdom.

CSS Clip:rect Rectangle clipping function and some application introduction