Gaya Gambar Panjenengan lan Gunakake Images ing Gaya
Akeh wong nggunakake CSS kanggo ngatur teks, ngganti font, warna, ukuran lan liya-liyane. Nanging siji-sijine wong sing kerep lali yaiku sampeyan bisa nggunakake CSS nganggo gambar uga.
Ngganti gambar dhewe
CSS ngidini sampeyan ngatur carane gambar katon ing kaca. Iki pancene migunani kanggo tetep page tetep. Kanthi nyetel gaya ing kabeh gambar, sampeyan nggawe tampilan standar kanggo gambar sampeyan. Sawetara bab sampeyan bisa:
- Nambah wates utawa njelasake gambar
- Copot border ing werna ing gambar sing disambung
- Nyetel lebar lan / utawa dhuwur saka gambar
- Nambah bayangan gulung
- Puter gambar
- Ngganti gaya nalika gambar ditudhuh
Menehi gambar minangka tapel wates minangka panggonan sing apik kanggo miwiti. Nanging sampeyan kudu nimbang luwih saka mung wates - mikir babagan pinggiran kabeh gambar lan nyetel pinggiran lan padding uga. Gambar karo ireng ireng alus katon apik, nanging nambah sawetara padding antarane wates lan gambar bisa katon luwih apik.
img {
wewatesan: 1px padhang ireng;
padding: 5px;
}
Iku apik kanggo tansah nyambung gambar tanpa hiasan , yen bisa. Nanging nalika sampeyan nindakake, elinga yen paling browser nambah border colored ing gambar. Sanajan sampeyan nggunakake kodhe ndhuwur kanggo ngowahi wates kasebut, pranala kasebut bakal nolak yen sampeyan ora mbusak utawa ngganti wates ing link kasebut uga. Kanggo nindakake iki, sampeyan kudu nggunakake aturan anak CSS kanggo mbusak utawa ngganti bates sak gambar sing disambung:
img> sing {
wates: ora;
}
Sampeyan uga bisa nggunakake CSS kanggo ngganti utawa nyetel dhuwur lan jembar gambar. Nalika iku ora idea gedhe kanggo nggunakake browser kanggo nyetel ukuran gambar amarga kecepatan download, padha njupuk luwih apik ing ngowahi ukuran gambar supaya padha katon apik. Lan kanthi CSS sampeyan bisa nyetel gambar kanggo kabeh dadi jembar standar utawa dhuwur utawa malah nyetel dimensi dadi relatif menyang wadah.
Elingi, yen sampeyan ngowahi ukuran gambar, kanggo asil sing paling apik, sampeyan mung kudu ngowahi ukuran siji - dhuwur utawa jembaré. Iki bakal nemokake yen gambar tetep rasio rasio, lan ora katon aneh. Nyetel angka liyane kanthi otomatis utawa ninggalake metu kanggo nyaritakake browser supaya aspek tetep konsisten.
img {
ambane: 50%;
dhuwur: otomatis;
}
CSS3 nawakake solusi kanggo masalah iki kanthi sifat anyar object-fit lan object-position. Kanthi sifat-sifat kasebut sampeyan bakal bisa nemtokake dhuwur gambar lan jembar sing tepat lan cara rasio aspek kudu ditangani. Iki bisa nggawe efek letterboxing ing saindhenging gambar utawa cropping kanggo entuk gambar supaya pas karo ukuran sing dibutuhake.
Nalika CSS3 objek-fit lan objek-posisi situs ora akeh didhukung, ana liyane CSS3 situs sing uga didhukung ing paling browser modern sing bisa digunakake kanggo ngowahi gambar. Bab sing kaya ngemot bayangan, sudhut bunder, lan transformasi kanggo muter, miring, utawa mindhah gambar sampeyan kabeh saiki ing paling browser modern. Sampeyan banjur bisa nggunakake transisi CSS kanggo nggawe gambar kasebut ganti nalika nglayang, utawa diklik, utawa sawise sawetara wektu.
Nggunakake Gambar minangka Latar
CSS nggawe gampang nggawe latar mburi apik karo gambar sampeyan.
Sampeyan bisa nambah latar menyang kaca kabeh utawa mung karo unsur tartamtu. Gampang nggawe gambar latar ing kaca karo properti gambar latar mburi:
body {
background-image: url (background.jpg);
}
Ngganti selector awak menyang elemen tartamtu ing kaca kanggo nempatake latar mburi siji elemen.
Bab liya sing bisa sampeyan lakukake karo gambar nggawe gambar latar mburi sing ora nggulung karo sisa kaca - kayata watermark. Sampeyan mung nggunakake gaya latar-lampiran: tetep; bebarengan karo gambar latar mburi Panjenengan. Opsi liyane kanggo latar mburi kalebu nggawe kothak mung sacara horisontal utawa vertikal nggunakake properti latar mburi.
Tulis ulang-ulang: ulang-x; kanggo nggoleki gambar kanthi horisontal lan latar mburi: baleni-y; kanggo kothak vertikal. Lan sampeyan bisa nyetel gambar latar mburi karo properti latar mburi.
Lan CSS3 nambah gaya liyane kanggo latar mburi uga. Sampeyan bisa nglumpukake gambar supaya pas karo ukuran latar mburi utawa nyetel gambar latar mburi kanthi ukuran jendhela . Sampeyan bisa ngganti posisi lan banjur nyalin gambar latar mburi. Nanging siji bab sing paling apik babagan CSS3 yaiku saiki sampeyan bisa nyemprotake macem-macem gambar latar mburi kanggo nggawe efek sing luwih ruwet.
HTML5 Mbantu Gaya Gambar
Unsur gambar ing HTML5 kudu diselehake ing sembarang gambar sing bisa ngadeg ing papan kasebut. Salah siji cara kanggo mikir babagan iku yen gambar bisa katon ing lampiran, banjur kudu ana ing unsur GAMBAR. Sampeyan banjur bisa nggunakake unsur kasebut lan elemen FIGCAPTION kanggo nambah gaya menyang gambar sampeyan.