Eine kurze Einführung in die Verwendung von Clip-Clipping in CSS

Das Clip-Attribut wird verwendet, um die Form des Elements festzulegen. Wird zum Ausschneiden absolut positionierter Elemente (absolut oder fest) verwendet.

clip hat drei Werte: auto |inherit|rect. Inherit ist Vererbung, IE unterstützt dieses Attribut nicht, auto ist die Standardeinstellung. Die ersten beiden sind im Grunde genommen Sojasauce. Lassen Sie uns hauptsächlich über das Rect-Attribut von Clip sprechen.

rect-Attribut des Clips: clip:rect(top, right, bottom, left) vier Attributwerte sind unverzichtbar

diese vier Wie wird ein Attributwert berechnet? Schauen Sie sich zunächst das Bild unten an

Rechteck oben, rechts, unten und links werden basierend auf der oberen linken Ecke berechnet

Schauen wir uns eine kleine Demo an

html:

<p id="demo">  
    <u class="c1"></u><u class="c2"></u>  
 </p>

css:

#demo { position: relative; border: 1px solid #ccc; width:140px; height: 140px; padding-top: 20px; }   
 #demo u { width: 128px;height: 128px; position: absolute; background: url(words.png) 0 -624px no-repeat;transition: all .5s ease-in-out 0s}   
 #demo p { text-align: center; line-height: 120px; background: url(words.png) 400px -624px no-repeat}   
 #demo .c1 { clip: rect(0,128px,0,64px);}   
 #demo .c2 { clip:rect(128px,64px,128px,0px)}   
 #demo:hover>.c1 {clip:rect(0px,128px,128px,64px)}   
 #demo:hover>.c2 {clip:rect(0px,64px,128px,0)}

Ich bin ein Neuling, bitte korrigieren Sie mich, wenn es Fehler gibt.

Ein kleiner Fortschritt jeden Tag ist eine Belohnung.

Der obige Artikel, in dem die Verwendung von Clip-Clipping in CSS kurz erläutert wird, ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, er kann Ihnen eine Referenz geben und hoffe, dass Sie die chinesische PHP-Website unterstützen.

Weitere verwandte Artikel über die Verwendung von Clip-Clipping in CSS finden Sie auf der chinesischen PHP-Website!