How to cut elements in css? How to use the clip attribute

青灯夜游
Release: 2018-11-28 16:44:45
Original
4493 people have browsed it

We can use the css clip attribute to cut the area of ​​the element, leaving only a part of the element visible. The remaining visible element is called the clipping area. This article will introduce to you how the CSS clip attribute cuts elements. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

How to cut elements in css? How to use the clip attribute

In CSS, the clip attribute can only work on elements with the absolute positioning: "position:absolute" or fixed positioning: "position:fixed" attribute set. It has no effect on elements with relative positioning: "position:relative" or static positioning: "position:static" attributes set.

When using clip, we can specify an inward offset to specify the area of ​​the edge of the element to be clipped.

The clip property only accepts one shape function, the rect() function, as a value. Let's take a look at the basic syntax of the rect() function:

rect(< top >,< right >,< bottom >,< left >);
Copy after login

We can see that the rect() function takes four parameters, which are offset inward from the top and left borders of the element. Offset.

The top and bottom values ​​both define offsets from the top border, while the left and right values ​​both define offsets from the left border.

How to cut elements in css? How to use the clip attribute
Show clipping property offset

The cropping area, or the part of an element that remains visible after clipping the element, is defined by the offset of the rect() function, rect() The rectangular shape that the function can create, as shown above. The clipping region of an

element will clip away any aspect of the element outside the clipping region (e.g., content, children, background, borders, text decorations, outlines, etc.). Clipped content will not cause overflow.

Usage of clip attribute

Basic syntax:

clip: auto | rect() | inherit;
Copy after login

rect() function syntax:

rect(<top>, <right>, <bottom>, <left>)
Copy after login

, , , are all set using length values

Instructions:

1. auto: The element is not clipped.

2. inherit: The element inherits its clip value from its parent.

3. rect(): Specify the rectangular clipping area. That is, it specifies that the visible area of ​​the element after clipping it is rectangular.

rect() function has four parameters. The parameters can be comma-separated or space-separated.

rect(< top >,< right >,< bottom >,< left >)/ *标准语法* /
/* 要么 */
rect(< top >  < right >  < bottom >  < left >)/ *向后兼容语法* /
Copy after login

rect() function also accepts the keyword auto as an offset. The value auto indicates that the given edge of the clipping area will be the same as the edge of the element's bounding box.

The parameters of the rect() function: top, right, bottom and left offset also accept negative length values.

Example: The part of the element is kept vertically between "40px" and "150px", and horizontally between "80px" and "260px"

img {     
   clip:rect(275px,575px,425px,365px);
}
Copy after login

Rendering:

How to cut elements in css? How to use the clip attribute
Example showing visible area after clipped element

The older space-delimited syntax is supported in Internet Explorer 4 to 7, so to ensure that clipping works in these browsers Valid in the browser, we can write both methods:

img {     
    clip:rect(40px 260px 150px 80px); / * IE 4到7 * / 
    clip:rect(40px,260px,150px,80px); / * IE8 +和其他浏览器* /
}
Copy after login

Example of clip attribute:

html code:

<div class="container">
  <p>
   在四个图像上悬停,以查看它们的剪辑区域展开。
  </p>
  <div class="element element-1">
    <img src="images/cat-How to cut elements in css? How to use the clip attribute" alt="">
  </div>
  <div class="element element-2">
    <img src="images/cat-4.jpg" alt="">
  </div>
  <div class="element element-3">
    <img src="images/cat-3.jpg" alt="">
  </div>
  <div class="element element-4">
    <img src="images/cat-How to cut elements in css? How to use the clip attribute" alt="">
  </div>
</div>
Copy after login

css code:

.container {
  margin: 40px auto;
  width: 300px;
  position: relative;
}

.element {
  width: 300px;
  height: 300px;
  z-index: 0;
  position: absolute;
  -webkit-transition: clip .4s ease-in-out, z-index .2s linear .4s;
  transition: clip .4s ease-in-out, z-index .2s linear .4s;
}

img {
  max-width: 100%;
}

.element-1 {
  background-color: #2c3e50;
  clip: rect(0px, 150px, 150px, 0px);
}

.element-2 {
  background-color: #f39c12;
  clip: rect(0px, 300px, 150px, 150px);
}

.element-3 {
  background-color: #16a085;
  clip: rect(150px, 150px, 300px, 0px);
}

.element-4 {
  background-color: #8e44ad;
  clip: rect(150px, 300px, 300px, 150px);
}

.element:hover {
  z-index: 1;
  -webkit-transition: clip .4s ease-in-out .2s, z-index .2s linear;
  transition: clip .4s ease-in-out .2s, z-index .2s linear;
  clip: rect(0px, 300px, 300px, 0px);
}
Copy after login

Rendering:

How to cut elements in css? How to use the clip attribute

##Browser support

The clip attribute is supported in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and Android and iOS.

Internet Explorer versions 7 back to 4 support the old space-delimited rect() syntax. Starting from IE8, the standard comma separated syntax is supported.

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study.

The above is the detailed content of How to cut elements in css? How to use the clip attribute. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template