Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to use clip attributes in CSS". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use clip attributes in CSS".

CSS fundamentals: explain the application of clip attributes in detail

Clip attribute is a useful attribute, but it is rare in practical application. This paper introduces several points that should be paid attention to in the application of clip attribute.

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

Second, the calculation coordinates of clip trimming are all calculated from the upper left corner, that is, the (0d0) point. Unlike padding and margin, the right and bottom margins of the two are calculated from the rightmost and the bottom.

Basic syntax for clip attributes:

◆ clip attribute description:

Retrieves or sets the visual area of the object. The part outside the visual area is transparent.

This property defines the size of the visual area of the absolute (absolute) anchored object. The value of the position property must be set to absolute before this property can be used.

This property is available on MAC platforms as of IE5. The corresponding script feature is clip. The clip attribute in CSS can not only make color text, but also effectively trim elements in other web pages.

The clip property sets the shape of the element. This property is used to define a clipping rectangle. The content is only visible in this rectangle, and the content of this clipping area is the same as that of overflow:hidden. The clipping area may be larger or smaller than the content area of the element.

◆ clip attribute value: auto | rect (top,right,bottom,left)

Auto stands for non-trimming, and the top, right, lower and left directions in the rect should be filled with numerical values, indicating the position of the trimming.

Let me give you a simple example of trimming a picture.

First of all, prepare a picture, its size is 159px*99 pixels, use the clip attribute to trim the image, so that only the big red dots in the picture are displayed.

I will first make a div frame for placing the picture, and its CSS definition is as follows:

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

Then define the trimming attributes of the image. CSS is defined as follows:

The absolute positioning here is relative to the div whose id is imgClip, and the values in clip are arranged in the order of upper right, lower right and left.

Html Code:

Thank you for your reading, these are the contents of "how to use clip attributes in CSS". After the study of this article, I believe you have a deeper understanding of how to use clip attributes in CSS, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.