Heim > Artikel > Web-Frontend > So verwenden Sie das CSS-Clip-Attribut
So verwenden Sie das CSS-Clip-Attribut
- silencementOriginal
- 2019-05-27 17:01:513745Durchsuche
CSS-Clip-Attribut wird verwendet, um die Form des Elements festzulegen. Wird zum Ausschneiden absolut positionierter Elemente verwendet. Wenn die Größe eines Bildes größer ist als das Element, das es enthält, ermöglicht das „Clip“-Attribut die Angabe der sichtbaren Größe eines Elements, sodass es innerhalb dieses Elements beschnitten und angezeigt wird.
Bei der Verwendung des CSS-Clip-Attributs müssen Sie die folgenden drei Punkte beachten:
1. Das Clip-Attribut kann nur für absolut positionierte Elemente verwendet werden, Position: absolut oder fest.
2. Das Clip-Attribut hat drei Werte: auto default; eine definierte Form, aber jetzt kann es nur ein quadratisches rect() sein, clip: { inherit }
3.shape Die vier Elemente in rect(
Beispiel
<!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="So verwenden Sie das CSS-Clip-Attribut" >
</body>
</html>Das Originalbild und das Seitenanzeigebild lauten wie folgt:
Originalbild
Seitenanzeige
Das obige ist der detaillierte Inhalt vonSo verwenden Sie das CSS-Clip-Attribut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!