Gaya Gambar anjeun sarta Paké Gambar di Styles
Loba masarakat nu make CSS nyaluyukeun téks, ngarobah font, warna, ukuran jeung beuki. Tapi hiji hal nu loba jalma mindeng poho nya nu tiasa make CSS jeung gambar ogé.
Ngarobah Gambar diri
CSS ngidinan Anjeun pikeun ngaluyukeun kumaha gambar mintonkeun dina kaca. Ieu tiasa bener mangpaat keur ngajaga kaca anjeun konsisten. Ku netepkeun gaya on sakabéh gambar, Anjeun nyieun hiji tampilan baku pikeun gambar Anjeun. Sababaraha hal nu tiasa ngalakukeun:
- Nambahkeun wates atawa outline sabudeureun gambar
- Leupaskeun wates berwarna sabudeureun Gambar numbu
- Nyaluyukeun lebar jeung / atawa jangkungna gambar
- Nambahkeun hiji serelek kalangkang
- Muterkeun gambar
- Ngarobah gaya lamun gambar kasebut hovered leuwih
Jokowi gambar anjeun wates ngarupakeun tempat gede pikeun ngamimitian. Tapi anjeun kudu mertimbangkeun leuwih ti ngan wates - pikir ngeunaan sakabéh ujung gambar anjeun sarta ngaluyukeun margins na padding ogé. Hiji gambar kalawan wates hideung ipis Sigana nice, tapi nambahkeun sababaraha padding antara wawatesan jeung gambar bisa ngungkaban malah hadé.
IMG {
wates: 1px solid hideung;
padding: 5px;
}
Ieu mangrupakeun ide nu sae pikeun salawasna numbu Gambar non-hiasan , nalika mungkin. Tapi mun anjeun ngalakukeun, inget yen paling panyungsi nambahkeun wates berwarna sabudeureun gambar. Malah lamun make kodeu luhur pikeun ngarobah wates, link bakal override nu iwal mun dipiceun atawa ngarobah wates dina link ogé. Jang ngalampahkeun ieu anjeun kudu make aturan anak CSS ngaleupaskeun atawa ngarobah wates sabudeureun Gambar numbu:
IMG> a {
wates: taya;
}
Anjeun oge bisa make CSS ngarobih atanapi diatur jangkungna sarta rubak gambar Anjeun. Bari éta lain pamanggih gede ngagunakeun browser pikeun ngaluyukeun ukuran gambar kusabab speeds download, aranjeunna meunang leuwih hadé dina pangaturan ukuran jadi gambar ambéh maranéhanana tetep kasampak alus. Tur kalawan CSS Anjeun tiasa nyetel Gambar anjeun ka sadaya janten lebar baku atawa jangkungna atawa malah ngeset dimensi janten relatif mun wadahna.
Inget, mun anjeun ngatur ukuran gambar, pikeun hasil pangalusna, Anjeun kedah ukur ngatur ukuran hiji diménsi - jangkungna atawa lebar. Ieu bakal enusre yen gambar bakal terus rasio aspék, sarta jadi teu kasampak aneh. Nyetél nilai sejen anu otomatis atawa ninggalkeun eta kaluar ngabejaan browser pikeun tetep rasio aspék konsisten.
IMG {
lebar: 50%;
jangkungna: otomatis;
}
CSS3 nawarkeun solusi pikeun masalah ieu kalayan sipat anyar nenda-fit tur tujuanna-posisi. Mibanda sipat ieu anjeun bakal bisa nangtukeun jangkungna gambar pasti tur rubak tur kumaha rasio aspék kudu diatur. Hal ieu bisa nyieun épék letterboxing sabudeureun Gambar anjeun atanapi cropping mun meunang gambar ka pas dina ukuran diperlukeun.
Sedengkeun CSS3 obyék-fit tur tujuanna-posisi sipat teu lega dirojong acan, aya sipat CSS3 séjén nu ogé dirojong di paling panyungsi modéren nu bisa Anjeun pake pikeun ngaropéa gambar Anjeun. Hal kawas bayangan serelek, rounded juru, sarta transformasi pikeun muterkeun, skew, atawa mindahkeun gambar anjeun sakabeh pagawean ayeuna di paling panyungsi modérn. Anjeun teras bisa make transisi CSS nyieun gambar robah nalika hovered leuwih, atawa diklik, atawa ngan sanggeus periode waktu.
Ngagunakeun Gambar sakumaha backgrounds
CSS matak ngamudahkeun pikeun nyieun backgrounds fancy kalawan gambar Anjeun.
Anjeun tiasa nambahkeun backgrounds ka sakabéh kaca atawa ngan unsur husus. Ieu gampang nyieun gambar latar dina kaca sareng harta tukang-gambar:
awakna {
tukang-gambar: url (background.jpg);
}
Ngarobah sejen awakna ka unsur husus dina kaca nempatkeun tukang on ngan hiji unsur.
Sejen hal fun anjeun bisa ngalakukeun jeung gambar anu nyieun hiji gambar tukang nu teu ngagulung jeung sésana kaca - kawas watermark a. Anjeun ngan nganggo gaya latar tukang-kantétan: dibereskeun; sapanjang kalawan gambar tukang Anjeun. Pilihan séjén pikeun backgrounds anjeun kaasup nyieun eta kotak ngan horisontal atawa vertikal ngagunakeun harta tukang-ulang.
Tulis tukang-ulang: ngulang-x; mun kotak gambar nu horisontal jeung latar-ulang: ngulang-y; mun kotak vertikal. Tur anjeun tiasa posisi gambar tukang anjeun kalawan harta tukang-posisi.
Sarta CSS3 nambihan langkung gaya keur backgrounds Anjeun ogé. Anjeun tiasa manteng Gambar anjeun pikeun nyocogkeun sagala ukuran tukang atawa nyetel gambar latar ka skala kalayan ukuran jandela . Anjeun tiasa ngarobah posisi nu lajeng klip gambar tukang. Tapi salah sahiji hal pangalusna ngeunaan CSS3 nyaeta nu ayeuna tiasa lapisan sababaraha gambar latar ka nyieun épék malah leuwih intricate.
HTML5 Ngabantu Style Gambar
Unsur tokoh dina HTML5 kudu ditempatkeun di sabudeureun sagala gambar nu bisa nangtung nyalira dina dokumen éta. Hiji cara mikir ngeunaan éta lamun gambar bisa muncul dina lampiran, mangka kedah jero unsur inohong. Anjeun teras bisa make eta unsur jeung unsur FIGCAPTION pikeun nambahkeun gaya mun gambar Anjeun.