Pada artikel sebelumnya, kami menggunakan gambar dengan gradien atas dan bawah sebagai latar belakang judul dan menerapkan efek sudut membulat padanya. Benarkah bingkai sudut membulat seperti ini hanya bisa digunakan untuk gambar yang relatif monoton? Bisakah kita juga membuat beberapa gambar dengan warna yang kaya menjadi transparan dan bulat?
Jawabannya iya, yuk kita lihat kung fu pamungkasnya.
Mari kita lihat rendering terakhirnya terlebih dahulu :
Anda lihat, ini adalah gambar bulat yang dibuat dengan CSS murni. Untuk melihat efek transparansi, saya secara khusus menerapkan gambar latar belakang. Anda dapat mengunduh model ini ke komputer Anda dan mengubah ukuran jendela sesuka Anda transparan.
Dengan efek ini, Anda tidak perlu lagi khawatir untuk membulatkan sudut setiap gambar. Efek ini sering terlihat di beberapa halaman demo berbasis gambar, dan sangat cocok untuk daftar dengan banyak gambar. Gimana, efeknya lumayan!
Oke, mari kita lihat mekanisme implementasinya!
Prinsip implementasi:
Efek ini sebenarnya adalah varian yang saya terapkan di Bab 2. Mari kita bicara tentang kode kunci utama.
Perubahan utama adalah posisi gambar latar belakang, namun kali ini sedikit berbeda dengan yang ada di Bab 2. Kali ini Anda perlu memperhitungkan perubahan pada dua sudut membulat di bawah.
Mari kita lihat dulu penerapan kedua sudut membulat di atas:
/*Posisi offset gambar--bagian atas*/
.sharp b.b2{posisi latar belakang:-4px atas;}
.sharp b.b3{posisi latar belakang:-2px -1px;}
.sharp b.b4{posisi latar belakang:-1px -2px;}
Lihatlah pengaturan gaya dari dua sudut membulat di bawah ini.
/*Posisi offset gambar--bagian bawah*/
.sharp b.b7{posisi latar belakang:-4px bawah;}
.sharp b.b6{posisi latar belakang:-2px bawah;}
.sharp b.b5{posisi latar belakang:-1px bawah;}
Gaya pemanggilan gambar yang berbeda:
/*Skema warna satu, gaya hijau----------------------------------------*/
/*Warna tepian*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,
.color1 .b7,.color1 .content{border-color:#262626;}
.color1 .b1,.color1 .b8{latar belakang:#262626;}
/*Jalur gambar*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 h3,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{latar belakang:url(gambar/1.jpg) tidak -mengulang;}
Dua kalimat pertama bersama-sama membentuk nilai warna kotak pembatas, yang perlu disetel ke nilai warna yang sama. Kalimat berikut menetapkan jalur pemanggilan gambar.
Hanya tiga kalimat untuk mendapatkan skema warna.