Erstellen Sie mit CSS3 ein cooles dreieckiges Hintergrundbild-CSS-Tutorial-php.cn

Erstellen Sie mit CSS3 ein cooles dreieckiges Hintergrundbild

青灯夜游

Freigeben： 2021-08-23 12:05:44

Original

2429 Leute haben es durchsucht

Wie können Sie Ihre Webseite auffälliger und hochwertiger gestalten? Ein ansprechender Hintergrund ist unverzichtbar! Im folgenden Artikel erfahren Sie einen kleinen Trick zur Verwendung von CSS3 zum Erstellen cooler dreieckiger Hintergrundbilder, damit Ihre Webseite sowohl schön als auch praktisch wird. ~

Wie der Titel schon sagt, zeigen wir Ihnen heute hauptsächlich, wie Sie mit CSS3 coole Hintergründe erstellen Die Dreieckshintergrundmethode ist nützlich, wenn wir völlig unterschiedliche Optionen anzeigen möchten, z. B. Tag und Nacht oder Winter und Sommer.

Beginnen wir direkt mit dem Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
  margin: 0;
  padding: 0;
}

div {
  position: absolute;
  height: 100vh;
  width: 100vw;
}

.day {
  background-image: url("https://img.php.cn/upload/article/000/000/024/611f69e8a300f34Erstellen Sie mit CSS3 ein cooles dreieckiges Hintergrundbild");
  background-size: cover;
  background-repeat: no-repeat;
}

.night {
  background-image: url("https://img.php.cn/upload/article/000/000/024/611f6a067f909111.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  clip-path: polygon(100vw 0, 0% 0vh, 100vw 100vh);
}
</style>
</head>
<body>
  <div class="day"></div>
  <div class="night"></div>
</body>
</script>
</body>
</html>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Erstellen Sie mit CSS3 ein cooles dreieckiges Hintergrundbild

Wie wäre es damit! Ist der Effekt nicht großartig!

Lassen Sie uns den obigen Code analysieren:

Erstellen Sie zuerst zwei Divs background-size-Attribut, um die Bildgröße festzulegen, und das background-repeat-Attribut, um nicht wiederholte Kacheln festzulegen.

cover

background-image属性添加背景图片，并使用background-size属性设置图片大小、background-repeat属性设置不重复平铺。
- background-size指定背景图片大小，当值设置为“cover”时，将保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
最后给第二个div使用clip-path

Zeichnen Sie abschließend mit dem Attribut clip-path ein Dreieck für das zweite div.

<body>
  <div class="day"></div>
  <div class="night"></div>
</body>

Nach dem Login kopieren

Clip-Pfad ist ein neues Attribut von CSS3, was Beschneidungspfad bedeutet, mit dem wir auf einfache Weise verschiedene geometrische Figuren generieren können. Clip-Pfad erreicht die gewünschten Grafiken durch die Definition eines speziellen Pfads. Und dieser Pfad ist genau der Pfad in SVG.

), jedes Koordinatenpaar repräsentiert die Koordinaten eines Scheitelpunkts des Polygons. Der Browser verbindet den letzten Scheitelpunkt mit dem ersten Scheitelpunkt, um ein geschlossenes Polygon zu bilden. Koordinatenpaare werden durch Kommas getrennt und können absolute oder prozentuale Einheitenwerte verwenden.

Die chinesische PHP-Website-Plattform verfügt über viele Video-Lehrressourcen. Wir heißen alle herzlich willkommen, „🎜CSS-Video-Tutorial🎜“ zu lernen! 🎜

Das obige ist der detaillierte Inhalt vonErstellen Sie mit CSS3 ein cooles dreieckiges Hintergrundbild. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!