Rumah > Artikel > hujung hadapan web > Cipta imej latar belakang segi tiga yang keren menggunakan CSS3

Cipta imej latar belakang segi tiga yang keren menggunakan CSS3

青灯夜游asal: 2021-08-20 17:10:332446semak imbas

Bagaimana untuk menjadikan halaman web anda lebih menarik perhatian dan mewah? Latar belakang yang tampan amat diperlukan! Artikel berikut akan berkongsi sedikit helah menggunakan CSS3 untuk mencipta imej latar belakang segi tiga yang keren, supaya halaman web anda boleh menjadi cantik dan praktikal~

Seperti tajuknya, hari ini kami akan menunjukkan kepada anda cara menggunakan ia. CSS3 cara untuk mencipta latar belakang segi tiga yang sejuk, yang sangat berguna apabila kita ingin menunjukkan beberapa pilihan yang sama sekali berbeza, seperti siang dan malam atau musim sejuk dan musim panas.

Mari kita mulakan dengan kod secara langsung:

<!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/611f69e8a300f34Cipta imej latar belakang segi tiga yang keren menggunakan CSS3");
  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>

Kesannya adalah seperti yang ditunjukkan di bawah:

Cipta imej latar belakang segi tiga yang keren menggunakan CSS3

Bagaimana pula! Bukankah kesannya hebat!

Mari kita analisa kod di atas:

Mula-mula buat dua div

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

Kemudian gunakan atribut background-image untuk menambah imej latar belakang pada kedua-dua div ini masing-masing dan gunakan atribut background-size untuk menetapkan saiz imej dan atribut background-repeat untuk menetapkan jubin tidak berulang.
- saiz latar belakang menentukan saiz imej latar belakang Apabila nilai ditetapkan kepada "cover", nisbah bidang imej akan dikekalkan dan imej akan menjadi. skala untuk menutup sepenuhnya kedudukan latar belakang Saiz minimum rantau.
Akhir sekali, gunakan atribut div untuk melukis segitiga bagi clip-path kedua.

 clip-path: polygon(100vw 0, 0% 0vh, 100vw 100vh);

laluan klip ialah atribut baharu CSS3, yang bermaksud laluan keratan, membolehkan kami menjana pelbagai rajah geometri dengan mudah. clip-path mencapai grafik yang kita inginkan dengan menentukan laluan khas. Dan laluan ini betul-betul laluan dalam SVG.
fungsi poligon(): digunakan untuk mentakrif poligon dan juga boleh digunakan untuk klip grafik. Parameternya ialah satu set pasangan koordinat ( ), setiap pasangan koordinat mewakili koordinat sesuatu bucu poligon. Pelayar akan menyambungkan bucu terakhir ke bucu pertama untuk membentuk poligon tertutup. Pasangan koordinat dipisahkan dengan koma dan boleh menggunakan nilai unit mutlak atau peratusan.

Platform tapak web PHP Cina mempunyai banyak sumber pengajaran video Selamat datang semua orang untuk mempelajari "tutorial video css"!

Atas ialah kandungan terperinci Cipta imej latar belakang segi tiga yang keren menggunakan CSS3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Ajar anda langkah demi langkah cara menggunakan css untuk menambah kesan nyalaan pada teks (penjelasan kod terperinci)Artikel seterusnya：Ajar anda langkah demi langkah cara menggunakan css untuk menambah kesan nyalaan pada teks (penjelasan kod terperinci)

Artikel berkaitan

Lihat lagi