Home > Developer > Web Develop
The clip property is used to set the shape of an element. Used to trim an absolutely positioned element.
When an image is larger than the element containing it, the clip property allows you to specify the visible dimensions of an element so that the element is trimmed and displayed in this element.
Use this attribute to note the following three points:
The 1.clip attribute can only be used for absolutely positioned elements, position:absolute or fixed.
There are three values for the 2.clip attribute: auto Default
Inherit inherits the parent's
A well-defined shape, but now only a square rect ()
clip: { shape | auto| inherit } ;
< top >, < right >, < bottom >, < left > The four elements in a 3.shape rect () cannot be omitted.
The following is a look at the rect () function of the clip property
clip: rect(<top>, <right>, <bottom>, <left>);
What do the four numbers mean? Look at two pictures to understand.
The simple understanding is: The picture flies high is bottom-top, the width is right-left. Of course, the picture will not be negative.
The clip property is available for most browsers and is a little different.
.my-element {
position: absolute; clip: rect(10px350px170px0); /* IE4 to IE7 */ clip: rect(10px, 350px, 170px, 0); /* IE8+ & other browsers */}Write an example below
<!doctype html>The original image and the page display picture are as follows
Original
(page display)
Reference: http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/
CSS3 in Clip properties
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
