How to cut a picture with css

This article introduces you how to use css to cut pictures, the content is very detailed, interested friends can refer to, hope to be helpful to you.

In css, you can use the clip attribute to cut a picture, which is used to cut an absolutely positioned element, and when the element is absolutely positioned, it can be cut using the clip attribute with the syntax "position:absolute;clip:rect (top,right,bottom,left);)".

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

How does css cut pictures?

In css, you can use the clip attribute to clip the picture, and the clip attribute to clip the absolute positioning element. In other words, it is only valid when it is position:absolute.

Examples are as follows:

Img {position:absolute;clip:rect (0px 50px 200px 0px)}

The clip property cuts an image:

Output result:

Img {position:absolute;clip:rect (A, B, C, D);}

Of course, you have to write specific pixel values when you write.

The purpose of this diagram is to show which distance these four values refer to.

A: the length of the clipped rectangle from the top of the parent element.

B: the length of the clipped rectangle to the left of the parent element + the width of the rectangle.

C: the length of the clip rectangle from the top of the parent element + the height of the rectangle.

D: the length of the clipped rectangle to the left of the parent element.

About how to use css to cut pictures to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.