Home >Web Front-end >CSS Tutorial >How to use css clip attribute
How to use css clip attribute
- silencementOriginal
- 2019-05-27 17:01:513770browse
css clip attribute is used to set the shape of the element. Used to clip absolutely positioned elements. When the size of an image is larger than the element containing it, the "clip" attribute allows specifying the visible size of an element so that it will be clipped and displayed within this element.
You need to pay attention to the following three points when using the css clip attribute:
1. The clip attribute can only be used for absolutely positioned elements, position: absolute or fixed.
2. The clip attribute has three values: auto default; inherit from the parent; a defined shape, but now it can only be a square rect(), clip: { shape | auto | inherit }
3.shape The four elements in rect(
Example
<!doctype html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<title>clip</title>
<style type="text/css">
img {
position:absolute;
top:0;
left:10px;
clip: rect(52px, 280px, 290px, 95px);
}
</style>
</head>
<body>
<img src="00.jpg"/ alt="How to use css clip attribute" >
</body>
</html>The original picture and the page display picture are as follows:
Original picture
Page display image
The above is the detailed content of How to use css clip attribute. For more information, please follow other related articles on the PHP Chinese website!