maklumat ringkas
Versi CSS
Nilai
url Nilai ialah laluan ke fail grafik, yang dinyatakan di dalam binaan url(). Laluan ke fail boleh ditulis sama ada dalam petikan (berganda atau tunggal) atau tanpanya. none Melumpuhkan imej latar belakang untuk elemen. mewarisi Mewarisi nilai ibu bapa.HTML5 CSS2.1 IE Cr Op Sa Fx
Model Objek
document.getElementById("elementID ").style.backgroundImage
Pelayar
Versi Internet Explorer sehingga dan termasuk 7.0 menggunakan latar belakang pada sempadan dalam elemen yang mempunyai set sifat hasLayout. Jika elemen tidak mempunyai hasLayout , sifat imej latar belakang akan menghormati sempadan elemen, seperti yang dinyatakan dalam spesifikasi. Perbezaan dalam paparan akan ketara jika sempadannya putus-putus atau bertitik daripada pepejal.
Jika elemen ditetapkan kepada tatal atau auto , Internet Explorer 8 akan mempunyai kelewatan menegak satu piksel apabila latar belakang menatal.
Versi Internet Explorer sehingga dan termasuk 7.0 tidak menyokong nilai warisan.
Jika latar belakang ditetapkan untuk baris jadual (tag
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
Hasil daripada contoh ini dalam penyemak imbas Chrome ditunjukkan dalam Rajah. 1. Penyemak imbas Internet Explorer, Opera dan Firefox memaparkan latar belakang garisan dengan betul (Gamb. 2).
nasi. 1. Ulang latar belakang untuk setiap sel
nasi. 2. Latar belakang untuk keseluruhan baris
Daripada pengarang: Hai semua. Warna dan imej latar belakang memainkan peranan yang besar dalam reka bentuk web, kerana ia membolehkan anda mereka bentuk sebarang elemen dengan lebih menarik. Hari ini kita akan melihat bagaimana untuk membuat latar belakang dalam HTML.
Adakah mungkin menggunakan HTML untuk menetapkan latar belakang?
Saya akan katakan dengan segera bahawa tidak. Secara umum, html tidak dicipta untuk mereka bentuk laman web. Ia sangat menyusahkan. Sebagai contoh, terdapat atribut bgcolor, yang mana anda boleh menetapkan warna latar belakang, tetapi ini sangat menyusahkan.
Sehubungan itu, kami akan menggunakan Cascading Style Sheets (CSS). Terdapat lebih banyak peluang untuk menetapkan latar belakang. Hari ini kita akan melihat yang paling asas.
Bagaimana untuk menetapkan latar belakang menggunakan css?
Jadi, pertama sekali, anda perlu memutuskan elemen yang anda ingin tetapkan latar belakang. Iaitu, kita perlu mencari pemilih yang akan kita tulis peraturan. Sebagai contoh, jika anda perlu menetapkan latar belakang untuk keseluruhan halaman secara keseluruhan, anda boleh melakukannya melalui pemilih badan, dan untuk semua blok melalui pemilih div. Nah, dll. Latar belakang boleh dan harus terikat kepada mana-mana pemilih lain: kelas gaya, pengecam, dsb.
Selepas anda memutuskan pemilih, anda perlu menulis nama harta itu sendiri. Untuk menetapkan warna latar belakang (iaitu warna pepejal, bukan kecerunan atau imej), gunakan sifat warna latar belakang. Selepas itu anda perlu meletakkan titik bertindih dan menulis warna itu sendiri. Ini boleh dilakukan dengan cara yang berbeza. Contohnya, menggunakan kata kunci, kod hex, rgb, rgba, format hsl. Apa-apa kaedah akan dilakukan.
Kaedah yang paling biasa digunakan ialah kod heksadesimal. Untuk memilih warna, anda boleh menggunakan program yang memaparkan kod warna. Contohnya, photoshop, cat atau beberapa alat dalam talian. Sehubungan itu, sebagai contoh, saya akan menulis latar belakang umum untuk keseluruhan halaman web.
badan (warna latar belakang: #D4E6B3; )
Kod ini perlu dimasukkan ke dalam bahagian kepala. Adalah penting bahawa fail berada dalam folder yang sama.
Gambar sebagai latar belakang
Untuk imej saya akan menggunakan ikon bahasa html kecil:
Mari buat blok kosong dengan pengecam:
< div id = "bg" > < / div > |
Mari kita berikan dimensi dan latar belakang yang jelas:
#bg( lebar: 400px; tinggi: 250px; imej latar belakang: url(html.png); )
#bg( lebar: 400px; ketinggian: 250px; latar belakang - imej: url (html. png); |
Daripada kod ini anda dapat melihat bahawa saya menggunakan harta baharu - imej latar belakang. Ia bertujuan khusus untuk memasukkan gambar sebagai latar belakang kepada elemen html. Mari lihat apa yang berlaku:
Untuk menentukan gambar, anda mesti menulis url kata kunci selepas titik bertindih, dan kemudian menunjukkan laluan ke fail dalam kurungan. Dalam kes ini, laluan ditentukan berdasarkan fakta bahawa imej berada dalam folder yang sama dengan dokumen html. Anda juga perlu menentukan format imej.
Jika anda telah melakukan ini, dan latar belakang masih tidak dipaparkan dalam blok, semak semula sama ada anda menulis nama imej dengan betul, sama ada laluan dan sambungan ditetapkan dengan betul. Ini adalah sebab yang paling biasa mengapa latar belakang tidak muncul kerana penyemak imbas tidak dapat mencari imej.
Tetapi adakah anda perasan satu perkara? Pelayar mengambil dan mendarabkan imej di seluruh blok. Jadi, untuk pengetahuan anda, ini ialah gelagat lalai imej latar belakang - ia diulang secara menegak dan mendatar selagi ia boleh dimuatkan ke dalam blok. Dengan tingkah laku ini anda boleh mengawal dengan mudah. Untuk melakukan ini, gunakan sifat ulangan latar belakang, yang mempunyai 4 nilai utama:
Ulang – nilai lalai, imej diulang pada kedua-dua belah;
Ulang-x – ulang hanya pada paksi x;
Ulang-y – ulang hanya sepanjang paksi y;
Tiada ulangan – tidak berulang sama sekali;
Anda boleh menulis setiap nilai dan melihat apa yang berlaku. Saya akan menulisnya seperti ini:
background-repeat: ulang-x;
latar belakang - ulang : ulang - x ; |
Sekarang ulangi hanya secara mendatar. Jika anda menetapkan tiada ulangan, maka hanya akan ada satu gambar.
Hebat, kita boleh selesaikan di sini, kerana ini adalah keupayaan asas untuk bekerja dengan latar belakang, tetapi saya akan menunjukkan kepada anda 2 lagi sifat yang membolehkan anda mendapatkan lebih kawalan.
Melalui pengulangan, pereka reka letak dahulu boleh mencipta tekstur latar belakang dan kecerunan menggunakan satu imej kecil. Ia mungkin 30 kali 10 piksel atau lebih kecil. Atau mungkin lebih sedikit. Imej itu sedemikian rupa sehingga apabila ia diulang pada satu atau bahkan kedua-dua belah, tiada peralihan kelihatan, jadi hasilnya adalah satu latar belakang yang lancar. Ngomong-ngomong, pendekatan ini patut digunakan sekarang jika anda ingin menggunakan tekstur yang lancar di tapak web anda sebagai latar belakang. Hari ini, kecerunan sudah boleh dilaksanakan menggunakan kaedah css3, kami pasti akan membincangkannya kemudian.
Kedudukan latar belakang
Secara lalai, imej latar belakang, melainkan ia ditetapkan untuk berulang, akan berada di sudut kiri atas bloknya. Tetapi kedudukan boleh ditukar dengan mudah menggunakan sifat kedudukan latar belakang.
Anda boleh menetapkannya dengan cara yang berbeza. Satu pilihan adalah dengan hanya menunjukkan sisi di mana gambar harus terletak:
kedudukan latar belakang: atas kanan;
latar belakang - kedudukan : kanan atas ; |
Iaitu, secara menegak semuanya tetap sama: imej latar belakang terletak di atas, tetapi secara mendatar kami menukar sisi ke kanan, iaitu, kanan. Satu lagi cara untuk menetapkan kedudukan adalah sebagai peratusan. Dalam kes ini, kira detik bermula dalam mana-mana kes dari sudut kiri atas. 100% - keseluruhan blok. Oleh itu, untuk meletakkan gambar tepat di tengah, kami menulisnya seperti ini:
kedudukan latar belakang: 50% 50%;
kedudukan latar belakang: 50% 50%; |
Ingat satu perkara penting tentang kedudukan - parameter pertama sentiasa kedudukan mendatar, dan yang kedua ialah kedudukan menegak. Jadi, jika anda melihat nilai 80% 20%, maka anda boleh segera membuat kesimpulan bahawa imej latar belakang akan banyak dialihkan ke kanan, tetapi ia tidak akan turun banyak.
Dan akhirnya, anda boleh menentukan kedudukan dalam piksel. Segala-galanya adalah sama, hanya daripada % akan ada px. Dalam sesetengah kes, kedudukan sedemikian mungkin diperlukan.
Notasi ringkas
Setuju bahawa kod itu ternyata agak menyusahkan jika semuanya ditetapkan seperti yang kita lakukan. Ternyata laluan ke gambar perlu ditentukan, pengulangan, dan kedudukan. Sudah tentu, pengulangan dan kedudukan tidak selalu diperlukan, tetapi dalam apa jua keadaan, adalah lebih tepat untuk menggunakan tatatanda trengkas untuk harta tersebut. Ia kelihatan seperti ini:
latar belakang: #333 url(bg.jpg) tiada ulangan 50% 50%;
latar belakang: #333 url(bg.jpg) tiada ulangan 50% 50%; |
Iaitu, langkah pertama ialah merekodkan keseluruhan warna latar belakang pepejal, jika perlu. Kemudian laluan ke imej, pengulangan dan kedudukan. Jika beberapa parameter tidak diperlukan, maka tinggalkan sahaja. Setuju, ini lebih cepat dan lebih mudah, dan kami juga mengurangkan kod kami dengan ketara. Secara umum, saya menasihati anda untuk sentiasa menulis dalam bentuk yang disingkatkan, walaupun anda hanya perlu menunjukkan warna atau gambar.
Mengawal saiz imej latar belakang
Imej semasa kami tidak begitu baik untuk menunjukkan helah seterusnya, jadi saya akan mengambil satu lagi. Biarkan saiz blok atau lebih besar. Jadi, bayangkan anda berhadapan dengan tugas membuat imej latar belakang supaya ia tidak memenuhi bloknya sepenuhnya. Dan gambar, sebagai contoh, adalah lebih besar daripada saiz blok.
Apa yang boleh anda lakukan dalam kes ini? Sudah tentu, pilihan yang paling mudah dan paling munasabah adalah dengan hanya mengurangkan imej, tetapi tidak selalu mungkin untuk melakukan ini. Katakan ia berada di pelayan dan pada masa ini tidak ada masa atau peluang untuk mengurangkannya. Masalahnya boleh diselesaikan menggunakan sifat saiz latar belakang, yang boleh dipanggil agak baru dan yang membolehkan anda memanipulasi saiz imej latar belakang, dan sememangnya sebarang latar belakang.
Jadi imej saya kini mengambil semua ruang dalam blok, tetapi saya akan memberikannya saiz latar belakang:
saiz latar belakang: 80% 50%;
saiz latar belakang: 80% 50%; |
Sekali lagi, parameter pertama menetapkan saiz mendatar, yang kedua - saiz menegak. Kami melihat bahawa segala-galanya telah digunakan dengan betul - foto menjadi 80% daripada lebar blok dalam lebar dan separuh tinggi. Di sini anda hanya perlu membuat satu penjelasan - dengan menetapkan saiz sebagai peratusan, anda boleh mempengaruhi perkadaran gambar. Jadi berhati-hati jika anda tidak mahu mengganggu perkadaran.
Seperti yang anda boleh meneka, saiz latar belakang juga boleh ditentukan dalam piksel. Terdapat dua lagi kata kunci yang juga boleh digunakan:
Penutup – imej akan diskalakan supaya sekurang-kurangnya pada satu sisi ia memenuhi blok sepenuhnya.
Mengandungi – skalakannya supaya imej muat sepenuhnya ke dalam blok pada saiz maksimumnya.
Kelebihan nilai ini ialah mereka tidak mengubah perkadaran gambar, menjadikannya sama.
Anda juga harus memahami bahawa meregangkan gambar boleh menyebabkan kemerosotan kualitinya. Saya boleh memberi contoh daripada kehidupan dan amalan sebenar pereka susun atur. Semua orang tahu dan faham bahawa apabila mereka bentuk untuk desktop, anda perlu menyesuaikan tapak dengan lebar monitor utama: 1280, 1366, 1920. Jika anda mengambil imej latar belakang dengan saiz, katakan, 1280 oleh 200, dan jangan berikannya saiz latar belakang, kemudian skrin dengan lebar lebih besar Ruang kosong akan muncul, imej tidak akan mengisi lebar sepenuhnya.
Dalam 99% kes, ini tidak sesuai dengan pembangun web, jadi dia menetapkan saiz latar belakang: penutup supaya imej sentiasa terbentang ke lebar maksimum tetingkap. Ini adalah teknik yang baik untuk digunakan, tetapi kini anda akan berhadapan dengan masalah bahawa pengguna dengan lebar skrin 1920 piksel mungkin melihat kualiti gambar yang tidak optimum.
Biar saya ingatkan anda, ia akan memanjang ke lebar maksimumnya. Oleh itu, kualiti secara automatik akan merosot. Satu-satunya penyelesaian yang betul di sini ialah menggunakan imej yang lebih besar pada mulanya - 1920 piksel lebar. Kemudian pada skrin terluas ia akan berada dalam saiz semula jadi, dan pada yang lain ia hanya akan dipotong secara beransur-ansur, tetapi pada masa yang sama, jika anda memilih imej latar belakang dengan betul, ini tidak akan menjejaskan penampilan tapak.
Secara umum, ini hanyalah 1 contoh cara menggunakan pengetahuan yang anda perolehi dalam artikel ini apabila menyusun susun atur sebenar.
Latar belakang lut sinar menggunakan css
Satu lagi ciri yang boleh dilaksanakan menggunakan css ialah latar belakang lut sinar. Iaitu, melalui latar belakang ini akan dapat melihat apa yang ada di belakangnya.
Sebagai contoh, saya akan menetapkan keseluruhan halaman sebagai latar belakang kepada imej yang kami gunakan sebelum ini dalam contoh. Untuk blok dengan pengecam bg, di mana kami menjalankan semua eksperimen kami, kami akan menetapkan latar belakang menggunakan format tetapan warna rgba.
Seperti yang saya katakan sebelum ini, terdapat banyak format untuk menetapkan warna dalam CSS. Salah satunya ialah rgb, format yang cukup terkenal untuk mereka yang bekerja dalam penyunting grafik. Ia ditulis seperti ini: rgb(17, 255, 34);
Nilai pertama dalam kurungan ialah ketepuan merah, kemudian hijau, kemudian biru. Nilai boleh berangka dari 0 hingga 255. Sehubungan itu, format rgba tidak berbeza, hanya satu lagi parameter ditambah - saluran alfa. Nilai boleh dari 0 hingga 1, di mana 0 adalah ketelusan lengkap.
Saya rasa tidak ada satu pun tapak di mana harta itu tidak digunakan latar belakang CSS. Nampaknya apa yang lebih mudah daripada harta ini? Tetapi tidak, keupayaannya jauh lebih luas daripada tugasan biasa gambar atau warna sebagai latar belakang halaman. Sesetengah perkara akan menjadi biasa, manakala yang lain mungkin baru kepada banyak perkara. Walau apa pun, adalah berguna untuk mengetahui dengan teliti cara latar belakang berfungsi.
CSS3 membawa banyak perkara baharu kepada harta itu, seperti ketelusan dan memberikan beberapa imej sebagai latar belakang, tetapi kita akan membincangkan perkara ini di bawah, tetapi pertama-tama kita akan melihat asas harta itu. latar belakang.
warna latar belakang
Saya lebih pasti bahawa anda telah menetapkan warna latar belakang lebih daripada sekali. Ini boleh dilakukan menggunakan beberapa jenis tatatanda: biasa (nama warna digunakan), heksadesimal atau tatatanda RGB. Setiap jenis adalah setara, gunakan mana-mana yang paling anda suka. Saya cuba menggunakan pilihan terpendek, dan untuk persepsi yang lebih mudah, fail gaya yang terhasil adalah lebih kecil sedikit.
P (warna-latar belakang: merah;) p (warna-latar belakang: #f00;) p (warna-latar belakang: #ff0000;) p (warna-latar belakang: rgb(255, 0, 0;))
CSS3 menyokong ketelusan, jadi kami boleh menambahkannya pada warna kami, contohnya seperti ini:
P (warna latar belakang: rgba(255, 0, 0, 0.5);)
Angka terakhir menetapkan ketelusan kepada 50%. Anda boleh menetapkan nilai ketelusan daripada 0 (latar belakang sepenuhnya telus) kepada 1 (legap sepenuhnya).
imej latar belakang
Sifat ini juga digunakan dengan kerap; ia membolehkan anda menetapkan imej ke latar belakang. CSS3 telah menambah keupayaan untuk menetapkan berbilang imej ke latar belakang, setiap satu mencipta lapisannya sendiri, jadi setiap satu yang berikutnya bertindih dengan yang sebelumnya. Mengapa ini mungkin berguna? Segala-galanya agak mudah - katakan anda perlu mengosongkan sedikit hiasan ke setiap sudut tapak. Memandangkan susun atur yang lebih kurang bergetah, menggunakan satu imej bukanlah pilihan. Oleh itu, kami membuat 4 "lapisan", memindahkan setiap imej ke sudutnya sendiri dan itu sahaja, masalahnya diselesaikan
Badan (imej latar belakang: url("imej1"), url("imej2"), url("imej3"))
Jika anda perlu menetapkan satu imej ke latar belakang, kami hanya meninggalkan yang pertama dalam kod, saya fikir ini boleh difahami.
Apabila menggunakan sebarang imej sebagai latar belakang, anda harus ingat dua peraturan:
- tetapkan warna latar belakang yang berbeza sekiranya pengguna tidak melihat imej atas sebab tertentu. Ia hanya boleh mematikan paparan gambar, menjimatkan trafik.
- Jangan gunakan imej latar belakang untuk menyampaikan sebarang maklumat penting. Atas sebab yang dinyatakan di atas, pengguna mungkin tidak melihatnya.
Sokongan untuk berbilang imej latar belakang agak luas. Semua pelayar, malah IE8, menyokong harta ini.
Salam, pembaca laman blog yang dihormati. Hari ini kita akan melihat lima peraturan CSS yang membolehkan anda menetapkan latar belakang untuk mana-mana elemen dalam Html - kedudukan latar belakang (imej, ulangan, warna, lampiran). Nah, jangan lupa untuk menyebut peraturan kompaun Latar Belakang.
Tidak ada yang rumit tentang ini, tetapi terdapat kehalusan dan nuansa tertentu yang perlu anda ketahui tentang templat siap pakai (ingat tentang, yang akan membantu mendedahkan semua selok-belok mana-mana reka bentuk).
Izinkan saya mengingatkan anda sekali lagi bahawa artikel ini adalah sebahagian daripada siri dan sebaiknya mula mengkaji penanda gaya dari awal, iaitu dengan artikel tentang apa itu CSS dan apa yang digunakan dengannya, dan kemudian ikuti mengikut susunan yang diberikan dalam buku rujukan. Walaupun, dalam apa jua keadaan, terpulang kepada anda, tetapi sekarang mari kita bercakap tentang menetapkan latar belakang.
Warna, warna latar belakang dan imej latar belakang
Mari kita lihat bagaimana untuk menetapkan warna elemen Html menggunakan Peraturan warna css. Sebenarnya, semuanya mudah di sini. Sintaks adalah normal dan anda boleh menetapkan warna mengikut cara ia dilakukan dalam bahasa penanda hiperteks. Seperti yang anda ingat, letakkan selepas tanda cincang (cincang - "#fe35a3"), atau menggunakan tiga digit, jika yang pertama bertepatan dengan nilai yang kedua, yang ketiga dengan yang keempat, dan yang kelima, masing-masing, dengan yang keenam ( kod warna “#aa33ff” boleh ditulis secara ringkas sebagai "a3f").
Selain itu, warna dalam kod Html dan Css boleh diwakili dalam bentuk perkataan (contohnya, "merah"), tetapi selalunya kod heksadesimal yang digunakan:
Warna:#303
Sebagai contoh, saya mewarnakan perenggan kecil ini dengan warna yang sama seperti di atas (#303). Ia kini berbeza sedikit daripada warna semua perenggan lain (lebih gelap), yang ditetapkan kepada #555 dalam fail CSS tema WordPress yang saya gunakan. Tetapi menetapkan warna menggunakan warna agak mudah, tetapi dengan latar belakang ia akan menjadi sedikit lebih rumit.
Jadi, untuk latar belakang dalam Css Terdapat lima peraturan yang boleh digabungkan menjadi satu jika dikehendaki. Untuk melihatnya, anda boleh pergi ke halaman spesifikasi W3C semasa dan mencari apa-apa sahaja dengan perkataan Latar Belakang:
- warna latar belakang - menggunakan peraturan ini, anda menetapkan warna latar belakang untuk sebarang elemen Html. Anda boleh menggunakan sama ada kod atau nama teduh, i.e. semuanya betul-betul sama seperti semasa menggunakan warna.
imej latar belakang - dengan itu anda boleh menggunakan gambar sebagai latar belakang (tetapi pastikan anda membaca tentangnya, kerana gambar yang berat akan memperlahankan pemuatan halaman), laluan yang akan ditunjukkan dalam fungsi url ().
Jika anda melihat spesifikasi anda akan melihatnya warna latar belakang lalai sebarang elemen akan menjadi telus (nilai lalai peraturan ialah "warna latar belakang: telus"). Benar, dalam elemen ia tidak akan telus secara lalai, kerana Ini adalah elemen sistem dan segala-galanya tentangnya berbeza dan berbeza daripada tag bahasa penanda hiperteks biasa.
Warna dalam warna latar belakang ditetapkan sebagai standard (enam atau tiga digit kod perenambelasan, atau satu perkataan):
Warna latar belakang:#FEFCDE
Sebagai contoh, latar belakang perenggan ini ditentukan menggunakan warna latar belakang dengan kod warna yang diberikan tepat di atas.
Semua empat peraturan CSS yang lain hanya akan melibatkan imej latar belakang, yang boleh ditetapkan untuk mana-mana elemen Html dan, jika dikehendaki, diletakkan dengan tepat. Fail grafik yang akan digunakan boleh ditentukan menggunakan imej latar belakang.
Jika anda melihat pada spesifikasi bahasa penanda, anda akan melihat bahawa imej latar belakang lalai kepada "tiada" (iaitu, tiada imej digunakan untuk latar belakang). Nah, jika anda masih memerlukan ini, maka dalam fungsi url() anda perlu menunjukkan laluan kepadanya:
Imej latar belakang:url(https://site/image/comment_top_focus.gif);
Sebagai contoh, untuk perenggan ini saya menggunakan fail grafik dengan latar belakang, laluan yang diterangkan di atas. Anda melihat bahawa keseluruhan kawasan yang diperuntukkan untuk perenggan ini diliputi dengan imej berulang, yang dalam asal kelihatan seperti ini:
Itu. apabila menggunakan hanya satu peraturan imej latar belakang yang menunjukkan laluan ke fail grafik, imej yang sama ini akan didarab secara menegak dan mendatar sehingga ia meliputi seluruh kawasan yang diperuntukkan pada halaman web untuk elemen Html khusus ini (dalam contoh kami, ia adalah satu perenggan). Kenapa ini terjadi?
Background-repeat - ulangi imej latar belakang
Ya, kerana kami tidak menyatakan sebarang nilai untuk peraturan CSS latar belakang-ulang, yang bermaksud bahawa nilai lalai akan digunakan untuknya. Melihat spesifikasi, kami mendapati bahawa nilai ini sepadan dengan "ulang" (ulangi imej pada semua paksi). Jawapannya datang secara semula jadi.
Oleh itu, dengan background-repeat kita boleh menguruskan ulangan imej latar belakang. Peraturan ini hanya boleh mempunyai empat makna:
Kedudukan latar belakang - kedudukan latar belakang
Sekarang timbul persoalan: adakah mungkin untuk mengalihkan imej latar belakang dari sudut kiri atas kawasan yang mengehadkan saiz elemen. Sudah tentu anda boleh, dan terdapat peraturan yang berasingan untuk tujuan ini. kedudukan latar belakang:
Melihat kepada spesifikasi CSS, menjadi jelas mengapa imej latar belakang secara lalai ditekan tepat ke tepi kiri atas kawasan elemen Html. Kerana nilai "0% 0%" ialah nilai lalai untuk peraturan kedudukan latar belakang.
Nah, apabila peraturan ini tidak ditetapkan secara eksplisit untuk elemen (seperti dalam kes kami), maka penyemak imbas memilih nilainya, yang diterima dalam spesifikasi secara lalai (perhatikan bahawa paksi koordinat dalam CSS dilaporkan tepat dari tepi kiri atas unsur kawasan).
Ia juga jelas daripada spesifikasi bahawa untuk meletakkan imej latar belakang menggunakan kedudukan latar belakang, anda boleh menggunakan kedua-dua nilai relatif (peratusan) dan mutlak (contohnya, ). Nah, anda juga boleh menggunakan perkataan yang sepadan dengan nilai digital tertentu. Tetapi perkara pertama dahulu.
Apabila menetapkan kedudukan imej latar belakang menggunakan unit mutlak dalam kedudukan latar belakang prinsip berikut digunakan untuk menentukan kedudukan terakhirnya:
Itu. penyemak imbas akan mengira offset yang ditentukan di sepanjang paksi X dan Y dari asal kawasan di mana objek diletakkan ke asal imej ini sendiri. Sebagai contoh, dalam perenggan ini saya meletakkan imej latar belakang melalui kedudukan latar belakang menggunakan peraturan CSS berikut:
Imej latar belakang:url(https://site/image/logo.png); background-repeat:no-repeat; kedudukan latar belakang: 400px 25px;
Sila ambil perhatian bahawa dalam kes ini, ia akan dijajarkan ke tengah kawasan tontonan, dan bukan ke tengah kawasan yang diperuntukkan untuk perenggan ini. Adalah jelas bahawa pada hakikatnya peletakan imej latar belakang sedemikian tidak mungkin digunakan.
Walau bagaimanapun, jika anda menetapkan kedudukan latar belakang tetap untuk elemen seperti Badan atau Html (iaitu dalam teg yang merangkumi keseluruhan halaman web), maka imej ini akan sentiasa kelihatan dalam port pandangan dan ini adalah tepat penggunaan lampiran latar belakang CSS harta dalam susun atur blok moden.
Adakah ada lagi peraturan pasang siap Latar belakang, yang membolehkan anda menggabungkan semua lima peraturan yang diterangkan di atas dalam satu botol. Lebih-lebih lagi, nilai untuk semua lima dalam versi gabungan boleh digunakan dalam apa-apa susunan dan dalam sebarang kuantiti (ia adalah unik dan pelayar tidak akan mengelirukan antara satu sama lain). Apa-apa sahaja yang anda tidak nyatakan secara eksplisit akan diandaikan oleh penyemak imbas sebagai nilai lalai.
Png) tiada ulangan 50%;
Contoh peraturan prefab digunakan pada perenggan ini untuk kejelasan. Ia ternyata tidak cantik, tetapi itu bukan perkara utama. Perenggan ini menggunakan isian latar belakang kuning pelik, dan juga menggunakan imej logo Liveinternet, dijajarkan ke tengah perenggan. Kerana Jika peraturan lampiran latar belakang tidak diberikan sebarang nilai, maka nilai tatal (lalai) digunakan.
Jika untuk beberapa elemen anda ingin menetapkan hanya isian warna dan tidak mengganggu imej latar belakang, maka anda boleh melakukan ini sebaliknya:
Warna latar belakang:#FEFCDE
tulis:
Latar belakang:#FEFCDE
Kerana semua nilai lain peraturan prefab akan diambil secara lalai, dan itulah yang anda perlukan.
Semoga berjaya! Jumpa anda tidak lama lagi di halaman laman blog
Anda mungkin berminat
Gaya senarai (jenis, imej, kedudukan) - Peraturan css untuk menyesuaikan penampilan senarai dalam kod Html Bagaimana untuk mengkonfigurasi warna latar belakang berselang-seli bagi baris jadual, senarai dan elemen Html lain di tapak menggunakan kelas pseudo anak ke-n 
Kedudukan (mutlak, relatif dan tetap) - cara untuk meletakkan elemen Html dalam CSS (peraturan kiri, kanan, atas dan bawah) 
Terapung dan jelas dalam CSS - alat susun atur blok 
Kedudukan menggunakan indeks Z dan peraturan Kursor CSS untuk menukar kursor tetikus 
Padding, Margin dan Border - tetapkan padding dalaman dan luaran dalam CSS, serta sempadan untuk semua sisi (atas, bawah, kiri, kanan) 
Paparan (sekat, tiada, sebaris) dalam CSS - tetapkan jenis paparan elemen Html pada halaman web 
Keutamaan dalam Css dan peningkatannya disebabkan oleh Penting, gabungan dan kumpulan pemilih, pengguna dan gaya pengarang 
CSS - apakah itu, bagaimana helaian gaya berlatarkan disambungkan kepada kod Html menggunakan Gaya dan Pautan 
Tag, kelas, Id dan pemilih universal, serta pemilih atribut dalam CSS moden
