Wie implementiert man ein kreisförmiges Bild mit reinem CSS?

CSS kann viele Effekte auf Webseiten erzielen. Wie können wir also reines CSS verwenden, um kreisförmige Bilder zu erzielen? In diesem Artikel stellen wir die Methode zur Realisierung kreisförmiger Bilder mit CSS vor. Werfen wir einen Blick auf den spezifischen Inhalt.

Wir beginnen mit grundlegendem HTML und CSS (vorausgesetzt, Sie können ein leeres HTML-Dokument erstellen und ein Stylesheet damit verknüpfen).

<div class="img-circular"></div>

Legen wir einen Grundstil für die Klasse img-circular fest.

.img-circular{
 width: 200px;
 height: 200px;
 background-image: url('img/tupian.jpg');
 background-size: cover;
 display: block;
}

Im obigen Code ist „background -size“ eine neue Eigenschaft von CSS3, mit der die Größe des Hintergrunds manipuliert werden kann. Sie können die Breite und Höhe festlegen, indem Sie genaue Pixelwerte oder Prozentsätze eingeben oder eine Hintergrundabdeckung erstellen, die auf die gesamte Seite passt.

Nachdem wir das Bild eingerichtet haben, ändern wir den CSS-Code, um einen kreisförmigen Rahmen zu erstellen. Wir verwenden die Eigenschaft border-radius, mit der wir den Bogen der Ecken eines Elements ändern können. Um das Bild kreisförmig zu machen, sieht unsere CSS-Datei nun so aus:

.img-circular{
 width: 200px;
 height: 200px;
 background-image: url('img/tupian.jpg');
 background-size: cover;
 display: block;
 border-radius: 100px;
 -webkit-border-radius: 100px;
 -moz-border-radius: 100px;
}

Das Ergebnis ist wie folgt: Das Bild wird kreisförmig

Das Der Artikel ist hier zu Ende. Weitere spannende Inhalte finden Sie in der Spalte CSS-Video-Tutorial auf der chinesischen PHP-Website! ! !

Das obige ist der detaillierte Inhalt vonWie implementiert man ein kreisförmiges Bild mit reinem CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!