Nglakokne teknik nganggo CSS
Yen sampeyan ngembangake situs web, sampeyan bisa uga kasengsem sinau babagan nggawe gambar latar mburi utawa watermark ing kaca web. Iki minangka perawatan desain umum sing wis populer online kanggo sawetara wektu. Efek banget kanggo nggawe tas desain web sampeyan kanthi trik.
Yen sampeyan ora nindakake iki sadurunge utawa wis nyoba kasebut sadurunge tanpa luck, proses bisa uga katon intimidating, nanging iku bener ora angel banget. Kanthi tutorial ringkes, sampeyan bakal entuk informasi sing perlu kanggo nguwaosi teknik kasebut kanthi cepet sawetara menit nggunakake CSS.
Miwiti
Gambar latar mburi utawa watermark (sing mung gambar latar mburi banget) duwe sejarah ing desain cetak. Dokumen wis suwe nglebokake watermark kanggo nyegah supaya ora disalin. Tambahan, akeh brosur lan brosur nggunakake gambar latar mburi gedhe minangka bagéan saka rancangan kanggo dicithak. Desain web kanthi gaya dawa sing dicithak saka gambar cetak lan latar mburi yaiku salah sawijining gaya sing dipinjam.
Gambar latar mburi gedhe iki gampang digawe kanthi nggunakake 3 jinis gaya CSS ing ngisor iki:
- gambar latar mburi
- latar mburi-ulang
- latar mburi-lampiran
- ukuran latar mburi
Gambar-Gambar
Sampeyan bakal nggunakake gambar latar mburi kanggo nemtokake gambar sing bakal digunakake minangka watermark panjenengan. Gaya iki mung nggunakake path file kanggo mbukak gambar sing sampeyan duwe ing situs, kamungkinan ing direktori sing dijenengi "gambar."
latar mburi-gambar: url (/images/page-background.jpg);
Pentingake yen gambar kasebut luwih entheng utawa luwih transparan tinimbang gambar normal. Iki bakal nggawe tampilan "watermark" ing ngendi gambar semi-transparan dumunung ing mburi teks, grafis, lan elemen utama ing kaca web. Tanpa langkah iki, gambar latar mburi bakal saingan karo informasi ing kaca sampeyan lan nggawe angel diwaca.
Sampeyan bisa nyetel gambar latar ing sembarang program editing kayata Adobe Photoshop.
Latar Belakang-Ulang
Properti latar mburi sabanjure sabanjure. Yen sampeyan pengin gambar dadi grafis gaya banyu sing gedhe, sampeyan bakal nggunakake properti iki supaya gambar kasebut bisa katon mung sapisan.
background-repeat: no-repeat;
Tanpa fitur "no-repeat", minangka standar kasebut, gambar bakal bola-bali ngulang ing kaca kasebut. Iki ora dikarepake ing desain kaca web paling modern, supaya gaya iki kudu dianggep penting ing CSS sampeyan.
Lampiran-Lampiran
Latar belakang-lampiran iku properti sing akeh perancang web lali babagan. Nggunakake terus gambar latar mburine nalika sampeyan nggunakake properti "tetep". Iku apa sing dadi gambar menyang watermark sing tetep ing kaca.
Nilai default kanggo properti iki yaiku "gulung." Yen sampeyan ora nemtokake nilai latar mburi, latar mburi bakal nggulung bebarengan karo sisa kaca.
latar mburi-lampiran: tetep;
Ukuran latar mburi
Ukuran latar belakang minangka properti CSS sing anyar. Ngidini sampeyan nyetel ukuran latar mburi sing didhasarake ing viewport sing ditampilake. Iki mbiyantu banget kanggo situs web sing responsif sing bakal ditampilake ing ukuran sing beda-beda ing piranti sing beda-beda .
ukuran latar mburi: tutup;
Loro nilai sing bisa digunakake kanggo properti iki kalebu:
- Penutup - Timbangan latar mburi supaya jembaré kebak utawa jangkep lengkap ditampilake. Iki tegese sawetara bagéan saka gambar ora bisa katon ing layar nanging kabeh wilayah bakal ditutupi.
- Contain - Timbangan gambar supaya kabeh lebar lan dhuwur dituduhake ing area sing ditata. Gambar ora dipateni, nanging kekurangan kuwi yaiku bagean saka wilayah sing ora bisa dicakup dening gambar kasebut.
Nambahake CSS menyang Page Panjenengan
Sawise sampeyan ngerti sifat lan nilai kasebut ing ndhuwur, sampeyan bisa nambah gaya kasebut menyang situs web sampeyan.
Nambahake ing ngisor iki menyang HEAD saka kaca web sampeyan yen sampeyan nggawe situs siji halaman. Nambah menyang gaya CSS saka gaya gaya njaba yen sampeyan mbangun situs multi-kaca lan pengin njupuk kauntungan saka daya sheet eksternal.