Gaya Imej Anda dan Gunakan Imej dalam Gaya
Ramai orang menggunakan CSS untuk menyesuaikan teks, menukar font, warna, saiz dan banyak lagi. Tetapi satu perkara yang banyak orang sering lupa ialah anda boleh menggunakan CSS dengan imej juga.
Menukar Imej Sendiri
CSS membolehkan anda menyesuaikan bagaimana paparan imej pada halaman. Ini boleh menjadi sangat berguna untuk menjaga halaman anda konsisten. Dengan menetapkan gaya pada semua imej, anda membuat penampilan standard untuk imej anda. Beberapa perkara yang boleh anda lakukan:
- Tambah sempadan atau garis besar di sekeliling imej
- Keluarkan sempadan berwarna di sekitar imej yang dipautkan
- Melaraskan lebar dan / atau ketinggian imej
- Tambah bayang-bayang drop
- Putar imej
- Tukar gaya apabila imej dihidupkan
Memberi imej anda sempadan adalah tempat yang bagus untuk bermula. Tetapi anda harus mempertimbangkan lebih daripada sekadar sempadan - memikirkan keseluruhan kelebihan imej anda dan menyesuaikan margin dan padding juga. Imej dengan sempadan hitam nipis kelihatan bagus, tetapi menambah padding antara sempadan dan imej boleh kelihatan lebih baik.
img {
sempadan: 1px pepejal hitam;
padding: 5px;
}
Adalah idea yang baik untuk sentiasa menghubungkan imej tanpa hiasan , jika mungkin. Tetapi apabila anda melakukannya, ingat bahawa kebanyakan pelayar menambah sempadan berwarna di sekitar imej. Sekalipun anda menggunakan kod di atas untuk menukar sempadan, pautan akan menimpa itu kecuali jika anda mengeluarkan atau mengubah sempadan pada pautan itu juga. Untuk melakukan ini, anda harus menggunakan peraturan kanak-kanak CSS untuk membuang atau menukar sempadan di sekeliling imej yang dipautkan:
img> a {
sempadan: tiada;
}
Anda juga boleh menggunakan CSS untuk menukar atau menetapkan ketinggian dan lebar imej anda. Walaupun ia bukan idea yang hebat untuk menggunakan penyemak imbas untuk menyesuaikan saiz imej kerana kelajuan muat turun, mereka semakin baik pada saiz semula imej supaya mereka kelihatan baik. Dan dengan CSS anda boleh menetapkan imej anda untuk semua menjadi lebar atau ketinggian standard atau bahkan menetapkan dimensi menjadi relatif kepada bekas.
Ingat, apabila anda mengubah saiz imej, untuk hasil terbaik, anda hanya perlu mengubah saiz satu dimensi - ketinggian atau lebarnya. Ini akan menggambarkan bahawa imej mengekalkan nisbah aspeknya, dan tidak kelihatan aneh. Tetapkan nilai lain untuk auto atau biarkan ia memberitahu penyemak imbas untuk memastikan nisbah aspek tetap konsisten.
img {
lebar: 50%;
ketinggian: auto;
}
CSS3 menawarkan penyelesaian kepada masalah ini dengan objek baru objek-objek dan kedudukan objek. Dengan sifat-sifat ini, anda akan dapat menentukan ketinggian dan lebar imej yang tepat dan bagaimana nisbah aspek harus dikendalikan. Ini mungkin membuat kesan huruf di sekeliling gambar atau tanam untuk mendapatkan imej agar sesuai dengan saiz yang diperlukan.
Walaupun ciri objek objek CSS3 dan objek objek tidak disokong secara meluas, terdapat ciri CSS3 lain yang disokong dengan baik dalam kebanyakan penyemak imbas moden yang boleh anda gunakan untuk mengubah suai imej anda. Perkara-perkara seperti bayang-bayang drop, sudut bulat, dan transformasi untuk berputar, condong, atau bergerak imej anda semua berfungsi sekarang dalam kebanyakan pelayar moden. Anda kemudiannya boleh menggunakan peralihan CSS untuk membuat perubahan imej apabila berlegar, atau diklik, atau hanya selepas tempoh masa.
Menggunakan Imej sebagai Latar Belakang
CSS memudahkan anda membuat latar belakang mewah dengan imej anda.
Anda boleh menambah latar belakang ke seluruh halaman atau hanya elemen tertentu. Mudah untuk membuat imej latar belakang pada halaman dengan sifat imej latar belakang:
badan {
background-image: url (background.jpg);
}
Tukar pemilih badan ke elemen tertentu pada halaman untuk meletakkan latar belakang pada hanya satu elemen.
Perkara lain yang menyeronokkan yang boleh anda lakukan dengan imej ialah membuat imej latar belakang yang tidak tatal dengan seluruh halaman - seperti watermark. Anda hanya menggunakan gaya latar-lampiran: tetap; bersama-sama dengan imej latar belakang anda. Pilihan lain untuk latar belakang anda termasuk menjadikannya jubin hanya secara mendatar atau menegak menggunakan harta belakang latar belakang.
Tulis ulang latar-belakang: ulang-x; untuk jubin imej secara mendatar dan latar belakang-ulang: ulang-y; ke jubin menegak. Dan anda boleh meletakkan imej latar belakang anda dengan kedudukan kedudukan latar belakang.
Dan CSS3 menambah lebih banyak gaya untuk latar belakang anda juga. Anda boleh meregangkan imej anda untuk menyesuaikan sebarang latar belakang saiz atau menetapkan imej latar belakang untuk skala dengan saiz tetingkap . Anda boleh menukar kedudukan dan kemudian klip imej latar belakang. Tetapi salah satu perkara terbaik mengenai CSS3 ialah anda kini boleh mengagungkan imej latar belakang berganda untuk mencipta kesan yang lebih rumit.
HTML5 Membantu Imej Gaya
Unsur RAJAH dalam HTML5 harus diletakkan di sekeliling mana-mana imej yang boleh berdiri sendiri di dalam dokumen. Salah satu cara untuk memikirkannya ialah jika imej boleh muncul di lampiran, maka ia mestilah berada di dalam elemen RAJAH. Anda kemudian boleh menggunakan unsur itu dan elemen FIGCAPTION untuk menambah gaya ke imej anda.