Menehi minat visual situs web karo grafis latar mburi
Gambar minangka bagean penting saka desain website sing menarik. Iki kalebu nggunakake gambar latar mburi. Iki minangka gambar lan grafis sing dipigunakaké ing dhaérah-dhaérah ing dhaérah sing sabanjuré karo gambar sing diwakili minangka bagéan saka kaca isi. Gambar latar mburi iki bisa nambah kapinteran visual menyang kaca lan mbantu sampeyan entuk desain visual sing bisa ditemokake ing kaca.
Yen sampeyan miwiti nggarap gambar latar mburi, sampeyan mesthi bakal mbukak ing skenario ing ngendi sampeyan pengin gambar supaya katon ing kaca kasebut.
Iki utamané bener kanggo situs web responsif sing dikirim menyang macem-macem piranti lan ukuran layar .
Kepinginan kanggo ngegungake gambar latar mburi yaiku kepinginan banget kanggo perancang web amarga ora saben gambar pas karo spasi situs web. Tinimbang nyetel ukuran sing tetep, babagan gambar iki ngidini supaya bisa nyukupi kaca kasebut, ora ketompo ukurane utawa cetha jendhela browser .
Cara paling apik kanggo babagan gambar sing pas karo latar mburi kaca yaiku nggunakake situs CSS3 , kanggo ukuran latar mburi. Punika conto sing nggunakake gambar latar mburi kanggo awak saka kaca lan sing mranata ukuran nganti 100% supaya bakal tansah regane kanggo pas karo layar.
body {
latar mburi: url (bgimage.jpg) no-repeat;
ukuran latar mburi: 100%;
}
Miturut caniuse.com, properti iki dianggo ing IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+, lan ing kabeh browser seluler utama. Iki kalebu sampeyan kabeh browser modern sing kasedhiya ing dina iki, sing tegese sampeyan kudu nggunakake properti iki tanpa wedi yen ora bisa digunakake ing layar seseorang.
Ngetik latar mburi ditrapake ing Browser lawas
Iku banget ora mungkin sampeyan kudu ndhukung sembarang browser lawas saka IE9, nanging supaya nganggep yen sampeyan prihatin sing IE8 ora ndhukung properti iki. Contone, sampeyan bisa nggawe latar latar mburi. Lan sampeyan bisa nggunakake prefixes browser kanggo Firefox 3.6 (-moz-background-size) lan Opera 10.0 (-o-background-size).
Cara paling gampang kanggo mbenturake gambar latar mburi yaiku nggronjal ing kabeh kaca. Banjur sampeyan ora mungkasi nganggo ruang ekstra utawa kudu kuwatir yen teks sampeyan cocok ing wilayah sing direksa. Punika piye carane:
id = "bg" />
- Pisanan, priksa manawa kabeh browser duwe dhuwur 100%, 0 pinggir, lan 0 padding ing elemen HTML lan BODY. Selehake ing ngisor dokumen HTML:
- Nambahake gambar sing sampeyan pengin dadi latar mburi minangka unsur pisanan kaca web, lan menehi id "bg":
- Posisi gambar latar mburi supaya tetep ing sisih ndhuwur lan kiwa lan dhuwur 100% lan 100% ing dhuwur. Tambah iki menyang sheet gaya:
img # bg {
posisi: tetep;
ndhuwur: 0;
kiwa: 0;
jembar: 100%;
dhuwur: 100%;
} - Nambah kabeh isi sampeyan ing kaca ing sajroning unsur DIV kanthi id "isi". Nambahake DIV ngisor gambar:
Cathetan: iku menarik kanggo katon ing kaca saiki. Gambar kudu nampilake stretched metu, nanging isi sampeyan ilang. Kenapa? Amarga gambar latar mburi 100%, lan divisi isi sawise gambar ing aliran dokumen - paling browser ora bakal nuduhake.Kabeh isi sampeyan ing kene - kalebu header, paragraf, etc.
- Posisi konten sampeyan supaya relatif lan nduweni indeks z 1. Iki bakal nyedhiyakake gambar ndhuwur ing panjelajah standar. Tambah iki menyang sheet gaya:
#content {
posisi: relatif;
z-index: 1;
}
- Nanging sampeyan ora rampung. Internet Explorer 6 ora standar lan tetep isih ana masalah. Ana akeh cara kanggo ndhelikake CSS saka saben browser nanging IE6, nanging sing paling gampang (lan paling ora bisa nyebabake masalah liyane) yaiku nggunakake komentar sing kondisional. Sebutake sawise sampeyan stylesheet ing kepala dokumen sampeyan:
- Ing komentar sing disorot, nambah sheet gaya liyane kanthi sawetara gaya kanggo njupuk IE 6 kanggo muter becik:
- Dadi manawa kanggo nyoba ing IE 7 lan IE 8 uga. Sampeyan uga kudu nyetel komentar kanggo ndhukung dheweke. Nanging, iku nalika aku nguji.
OK - iki admittedly WAY overkill. Situs banget sawetara perlu ndhukung IE 7 utawa 8 maneh, luwih kurang IE6!
Dadi, pendekatan iki minangka antiquated lan mungkin ora perlu kanggo sampeyan. Aku ninggalake kene luwih kaya model penasaran babagan carane akeh liyane angel padha sadurunge kabeh browser kita diputer supaya apik bebarengan!
Ngetik gambar latar mburi liwat Space sing luwih cilik
Sampeyan bisa nggunakake teknik sing padha supaya palsu mburine gambar latar tengen sawijining DIV utawa unsur liyane ing kaca web sampeyan. Iki luwih trickier kayata sampeyan kudu nggunakake posisi absolut utawa duwe masalah spasi aneh kanggo bagian liya saka kaca sampeyan.
- Selehake gambar ing kaca sing arep digunakake minangka latar mburi.
- Ing sheet gaya, nyetel lebar lan dhuwur kanggo gambar. Elinga, sampeyan bisa nggunakake persentase kanggo jembar utawa dhuwur, nanging aku luwih gampang nyetel kanthi dawa kanggo dhuwur.
img # bg {
jembar: 20em;
dhuwur: 30em;
} - Selehake isi sampeyan ing div karo id "isi" kaya apa:
Kabeh isi sampeyan ing kene
- Gaya div isi dadi jembar lan dhuwur sing padha kaya gambar latar mburi:
div # content {
jembar: 20em;
dhuwur: 30em;
} - Banjur posisi isi nganti dhuwur sing padha karo gambar. Dadi yen gambarmu 30em sampeyan bakal duwe gaya ndhuwur: -30em; Aja lali masang z-indeks 1 ing isi.
#content {
posisi: relatif;
ndhuwur: -30em;
z-index: 1;
jembar: 20em;
dhuwur: 30em;
} - Banjur nambahake z-indeks -1 kanggo IE 6 pangguna, kayata:
Maneh, kanthi ukuran latar mburi ngrungokake dhukungan browser sing amba saiki, pendekatan iki uga banget ora perlu lan ditampilake minangka produk saka zaman sing wis suwe. Yen sampeyan pengin nggunakake pendekatan iki, mung manawa kanggo nyoba iki minangka akeh browser sampeyan bisa.
Lan yen isi sampeyan ganti ukuran, sampeyan kudu ngowahi ukuran wadah lan gambar latar mburi, yen, sampeyan bakal mungkasi asil sing aneh.