Shulou(Shulou.com)06/03 Report--

Editor to share with you how to use the clipping attribute clip in CSS, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Define

An absolute or fixed positioning element can change the shape of the clipping area by using the attribute clip, but does not change the width and height attributes of the element itself.

Clip

Value: rect (top,right,bottom,left) | auto | inherit

Initial value: auto

Apply to: absolute positioning or fixed positioning elements

Inheritance: none

[note] the default value of auto means that the content of the element should not be clipped

Rect

The value in clip:rect (top,right,bottom,left) is not the edge offset, but the distance from the upper-left corner of the element. Specifically, top and bottom represent the distance from the upper boundary of the element; left and right are the distance from the left boundary of the element. Here the boundary of the element refers to the outside of the element border.

Rect (...) The syntax of is quite different from other grammars of CSS. The reason is that it is based on the early positioning draft, which uses the upper-left offset mechanism. Before CSS2, the IE that implemented this syntax had become a complete recommendation, so the standard was changed from edge offset to applicable to this implementation. However, this means that if the height and width are not clearly defined, a consistent clipping area cannot be set.

[note] IE7- browsers do not support rect (top,right,bottom,left), but support rect (top right bottom left), while other browsers support both.

Clip:rect (...) Only length values and auto are allowed, not percentages. If set to auto, it is equivalent to setting the clipping boundary to the appropriate content boundary. Setting auto for top or left is equivalent to 0; for right or bottom setting auto, it is equivalent to horizontal width and or vertical height and

[note] the boundary of the horizontal or vertical clip area of the element is outside the bounding box, excluding outline

Application

1. Hiding effect

When top > = bottom or left > = right in clip:rect (top,right,bottom,left), the hiding effect of the element can be realized, which is similar to that of visibility:hidden.

two。 Sprite map positioning

Css sprite

Definition: css sprite is a web image application processing method that allows all sporadic pictures involved in a page to be included in a large image.

Advantages:

[1] reduce the number of http requests

[2] reduce the size of the picture and increase the loading speed of the web page (the loading speed of multiple pictures is lower than that of the combined images)

Disadvantages:

[1] increase development cost

[2] increase maintenance cost

It can only merge pictures that are used in the background:

[1] for

Set pictures, can not be merged into large images, if you merge these pictures will affect the readability of the page, semantic reduction and small scope of adjustment.

[2] for horizontal and vertical tiled pictures, we can not use css cprite, if it is horizontally tiled, we can only combine all horizontally tiled pictures into a large picture, which can only be arranged vertically, not horizontally; if it is vertically tiled, we can only combine all longitudinally tiled pictures into a large picture, which can only be arranged horizontally, not vertically.

Css sprite allows you to include all the sporadic pictures involved in a page into a large image, and then use background-position to show the area that should be displayed.

The same effect can be achieved if you use clip.

Div {height:128px; overflow: hidden;} img {position:absolute; background-color: rgba; clip:rect, 128px margin-top;} img:hover {margin-top:-128px; clip:rect

3. Demonstration effect of lyrics

The use of clip and background-clip to achieve lyrics demonstration effect, in fact, by changing the width can also be achieved, mainly used to expand ideas.

@ keyframes loop {0% {clip:rect);} 100% {clip:rect (0520px recorder 100pxPower0);}} .show, .con {width: 520px; height: 100px; line-height: 100px; font-size: 30px; position:absolute; background-color: lightgreen } .con {animation: loop 6s linear infinite;-webkit-background-clip: text; color: red;} I have crossed mountains and seas, and I have crossed mountains and seas, and all the contents of this article entitled "how to use clip in CSS", thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.