Cipta imej latar belakang segi tiga yang keren menggunakan CSS3-tutorial css-php.cn

Cipta imej latar belakang segi tiga yang keren menggunakan CSS3

青灯夜游

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

asal

2430 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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);

Salin selepas log masuk

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!