Heim  >  Artikel  >  Web-Frontend  >  So schneiden Sie Bilder mit CSS aus

So schneiden Sie Bilder mit CSS aus

WBOY
WBOYOriginal
2021-11-29 12:01:399540Durchsuche

In CSS können Sie das Clip-Attribut zum Ausschneiden von Bildern verwenden. Wenn das Element absolut positioniert ist, können Sie zum Ausschneiden das Clip-Attribut verwenden : rect(oben, rechts, unten, links);)“.

So schneiden Sie Bilder mit CSS aus

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

So schneiden Sie Bilder in CSS aus

In CSS können Sie das Clip-Attribut zum Ausschneiden von Bildern und das Clip-Attribut zum Ausschneiden absolut positionierter Elemente verwenden. Mit anderen Worten: Es ist nur wirksam, wenn position:absolute verwendet wird.

Das Beispiel sieht wie folgt aus:

<html>
<head>
<style type="text/css">
img {
position:absolute;
clip:rect(0px 50px 200px 0px)
}
</style>
</head>
<body>
<p>clip 属性剪切了一幅图像:</p>
<p><img  border="0" src="/i/eg_bookasp.gif"    style="max-width:90%"  style="max-width:90%" alt="So schneiden Sie Bilder mit CSS aus" ></p>
</body>
</html>

Ausgabeergebnis:

So schneiden Sie Bilder mit CSS aus

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

So schneiden Sie Bilder mit CSS aus

Natürlich müssen Sie beim Schreiben den spezifischen Pixelwert angeben.

Der Zweck dieses Bildes besteht darin, zu veranschaulichen, auf welche Entfernung sich diese vier Werte beziehen.

A: Die Länge des Beschneidungsrechtecks ​​vom oberen Rand des übergeordneten Elements.

B: Die Länge des Beschneidungsrechtecks ​​von der linken Seite des übergeordneten Elements + die Breite des Rechtecks.

C: Die Länge des Beschneidungsrechtecks ​​vom oberen Rand des übergeordneten Elements + die Höhe des Rechtecks.

D: Die Länge des Beschneidungsrechtecks ​​von der linken Seite des übergeordneten Elements.

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo schneiden Sie Bilder mit CSS aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn