Dari Penulis: Saya menyambut semua orang. Warna latar belakang dan gambar dalam desain web memiliki peran besar, karena mereka memungkinkan Anda untuk mengatur elemen apa pun secara lebih menarik. Cara membuat latar belakang dalam HTML, kita akan melihat hari ini.
Apakah mungkin dilakukan dengan cara HTML saat mengatur latar belakang?
Segera saya akan mengatakan bahwa tidak ada. Secara umum, HTML tidak dibuat untuk menyusun halaman web. Itu sangat tidak nyaman. Misalnya, ada atribut BGColor, yang dengannya Anda dapat mengatur warna latar belakang, tetapi sangat tidak nyaman.
Dengan demikian, kami akan menggunakan cascading style sheets (CSS). Ada lebih banyak peluang untuk tugas backgrow. Hari ini kita akan menganalisis yang paling mendasar.
Bagaimana cara mengatur latar belakang melalui CSS?
Jadi, pertama-tama, Anda perlu memutuskan bagaimana elemen perlu ditentukan. Artinya, kita perlu menemukan pemilih yang akan kita tulis aturan. Misalnya, jika latar belakang harus ditanya seluruh halaman secara keseluruhan, Anda dapat melakukannya melalui pemilih tubuh, semua blok - melalui pemilih div. Nah, dll. Latar belakang dapat dan perlu diikat ke pemilih lainnya: kelas bergaya, pengidentifikasi, dll.
Setelah Anda memutuskan pemilih, Anda perlu menulis nama properti itu sendiri. Untuk mengatur warna latar belakang (warna solid dengan tepat, bukan gradien dan bukan gambar), properti warna latar belakang digunakan. Setelah itu, Anda perlu meletakkan usus besar dan menulis warna itu sendiri. Ini dapat dilakukan dengan cara yang berbeda. Misalnya, menggunakan kata kunci, kode hex, rgb, rgba, format HSL. Cara apa pun akan cocok.
Metode kode heksadesimal paling sering digunakan. Untuk memilih warna, Anda dapat menggunakan program di mana kode warna terlihat. Misalnya, photoshop, cat atau alat online apa pun. Dengan demikian, misalnya, latar belakang keseluruhan untuk seluruh halaman web.
tubuh (latar belakang-warna: # D4E6B3;)
Kode ini harus dimasukkan ke bagian kepala. Penting bahwa file berada di folder yang sama.
Gambar sebagai latar belakang
Sebagai gambar, saya akan menggunakan ikon bahasa HTML kecil:
Buat blok kosong dengan pengidentifikasi:
< div id = "bg" > < / div > |
Biarkan dia memberikan ukuran dan latar belakang yang eksplisit:
#Bg (lebar: 400px; tinggi: 250px; latar belakang-gambar: URL (html.png);)
#bg ( lebar: 400px; tinggi: 250px; latar belakang - Gambar: URL (HTML. PNG); |
Dari kode ini Anda dapat melihat bahwa saya menggunakan properti baru - gambar latar belakang. Ini dimaksudkan hanya untuk memasukkan gambar sebagai elemen HTML backdrop. Mari kita lihat apa yang terjadi:
Untuk mengatur gambar, Anda harus menulis kata kunci URL setelah usus besar, dan kemudian dalam tanda kurung untuk menentukan jalur ke file. Dalam hal ini, jalur ditunjukkan berdasarkan fakta bahwa gambar terletak pada folder yang sama dengan dokumen HTML. Anda juga perlu menentukan format gambar.
Jika Anda telah melakukan ini, dan latar belakang tidak hilang di blok, periksa lagi, apakah Anda menulis nama gambar dengan benar, jalur dan ekspansi sudah benar. Ini adalah alasan paling sering mengapa latar belakang tidak ditampilkan, karena browser tidak dapat menemukan gambar.
Tetapi apakah Anda melihat satu fitur? Browser mengambil dan menyebarkan gambar di seluruh blok. Jadi, sehingga Anda tahu, ini adalah perilaku gambar latar belakang secara default - mereka diulang secara vertikal dan horizontal untuk waktu itu, sementara mereka dapat masuk ke blok. Pada perilaku ini Anda dapat dengan mudah mengelola. Untuk melakukan ini, gunakan properti latar belakang-berulang, yang memiliki 4 nilai utama:
Ulangi - nilai default, gambar diulangi di kedua sisi;
Ulangi-X - berulang hanya pada atau x;
Ulangi-y - berulang hanya di sepanjang sumbu Y;
Tidak berulang - tidak diulang sama sekali;
Setiap nilai yang dapat Anda daftarkan dan lihat apa yang terjadi. Saya Menjali Ini:
latar Belakang - Ulangi: Ulangi-X;
latar Belakang - Ulangi: Ulangi - X; |
Sekarang pengulangan hanya horizontal. Jika Anda mendaftar tanpa-ulangi, hanya akan ada satu gambar.
Luar biasa, Anda sudah dapat menyelesaikannya, karena ini adalah fitur dasar bekerja dengan latar belakang, tetapi saya akan menunjukkan kepada Anda 2 properti lain yang memungkinkan Anda untuk mendapatkan lebih banyak peluang dalam manajemen.
Dengan bantuan pengulangan, vertellors digunakan untuk mencapai fakta bahwa tekstur latar belakang dan gradien dibuat, menggunakan satu gambar kecil. Bisa jadi 30 per 10 piksel atau bahkan kurang. Atau mungkin sedikit lebih. Gambar itu sedemikian rupa sehingga ketika dia mengulangi satu atau bahkan di kedua sisi, tidak ada transisi, jadi pada akhirnya, latar belakang satu potong tunggal diperoleh. By the way, pendekatan seperti itu harus digunakan dan sekarang, jika Anda ingin menggunakan tekstur yang mulus di situs Anda sebagai latar belakang. Gradien hari ini sudah dapat diimplementasikan oleh metode CSS3, kita masih akan dibicarakan tentang ini.
Posisi latar belakang
Secara default, gambar latar belakang, jika pengulangan tidak ditentukan untuk itu, akan berada di sudut kiri atas dari bloknya. Tetapi posisi dapat dengan mudah diubah menggunakan properti posisi latar belakang.
Anda dapat menentukannya dengan cara yang berbeda. Salah satu opsi, itu hanya untuk menentukan pihak-pihak di mana gambar harus:
posisi latar belakang: kanan atas;
latar belakang - Posisi: kanan atas; |
Artinya, semuanya tetap vertikal: gambar latar belakang terletak di atas, tetapi secara horizontal kami mengubah sisi di kanan, itu benar. Cara lain untuk mengatur posisi adalah persen. Hitungan mundur pada saat yang sama dimulai dalam kasus apa pun dari sudut kiri atas. 100% - semua blok. Dengan demikian, untuk menempatkan gambar tepat di tengah, tulis ini:
posisi latar belakang: 50% 50%;
latar Belakang - Posisi: 50% 50%; |
Ingat satu hal penting yang terkait dengan posisi - parameter pertama selalu menunjukkan posisi horizontal, dan yang kedua secara vertikal. Jadi, jika Anda melihat nilai 80% 20%, maka Anda dapat segera menyimpulkan bahwa gambar latar akan sangat bergeser ke kanan, tetapi tidak akan turun banyak.
Ya, akhirnya, dimungkinkan untuk meresepsi posisi dalam piksel. Semua sama, hanya alih-alih% akan ada px. Dalam beberapa kasus, penentuan posisi seperti itu juga mungkin diperlukan.
Rekaman disingkat.
Setuju bahwa kode ini cukup rumit, jika kita mengatur semuanya seperti yang kita lakukan. Ternyata, dan jalur ke gambar harus ditentukan, dan pengulangan, dan posisinya. Tentu saja, pengulangan dan posisi tidak selalu diperlukan, tetapi bagaimanapun, akan lebih benar untuk menggunakan entri properti yang disingkat. Dia terlihat seperti ini:
latar Belakang: # 333 URL (BG.jpg) Tidak Berulang 50% 50%;
latar Belakang: # 333 URL (BG.jpg) tanpa-ulangi 50% 50%; |
Artinya, hal pertama yang Anda butuhkan untuk merekam total warna latar belakang padat, jika perlu. Kemudian jalur ke gambar, pengulangan, dan posisi. Jika beberapa parameter tidak diperlukan, maka kita cukup menghilangkannya. Setuju, itu jauh lebih cepat dan lebih nyaman, dan kami juga secara signifikan mengurangi kode kami. Secara umum, saya menyarankan Anda untuk mencatat disingkat selalu, bahkan jika Anda hanya perlu menentukan warna atau gambar.
Kelola ukuran gambar latar belakang
Gambar kami saat ini tidak sangat cocok untuk demonstrasi trik berikutnya, jadi saya akan mengambil yang lain. Berukuran, itu akan seperti blok atau lebih dari itu. Jadi, bayangkan Anda memiliki tugas: membuat gambar latar belakang sehingga mengisi bloknya tidak sepenuhnya. Dan gambarnya, katakanlah lebih banyak ukuran blok.
Bagaimana saya bisa melakukannya dalam hal ini? Tentu saja, opsi termudah dan paling masuk akal hanya akan mengurangi gambar, tetapi tidak selalu mungkin untuk melakukannya. Misalkan itu terletak di server dan saat ini tidak ada waktu dan menguranginya. Masalahnya dapat diselesaikan dengan menggunakan properti ukuran latar belakang, yang dapat disebut relatif baru dan yang memungkinkan Anda memanipulasi ukuran gambar latar belakang, dan memang ada latar belakang.
Jadi, gambar saya sekarang membahas semua ruang di blok, tetapi saya akan menanyakan ukuran latar belakangnya:
ukuran latar: 80% 50%;
latar Belakang - Ukuran: 80% 50%; |
Sekali lagi, parameter pertama diatur ke horizontal, yang kedua secara vertikal. Kami melihat bahwa semuanya diterapkan dengan benar - foto menjadi ukuran 80% dari lebar blok lebar dan setengah ke ketinggian. Di sini Anda hanya perlu membuat satu penyempurnaan - mengatur ukuran dalam persentase Anda dapat mempengaruhi proporsi gambar. Jadi berhati-hatilah jika Anda ingin tidak mengganggu proporsinya.
Seperti yang dapat Anda tebak, ukuran latar belakang juga dapat ditunjukkan dalam piksel. Masih ada dua nilai kata kunci yang juga dapat digunakan:
Tutup - akan ada penskalaan untuk gambar sedemikian rupa sehingga setidaknya satu sisi itu sepenuhnya mengisi blok.
Berisi - dicadangkan sehingga gambar sepenuhnya naik ke blok dalam ukuran maksimum.
Keuntungan dari nilai-nilai ini adalah bahwa mereka tidak mengubah proporsi gambar, membiarkannya sama.
Anda juga harus memahami bahwa meregangkan gambar dapat menyebabkan kemunduran kualitasnya. Saya bisa memberikan contoh dari kehidupan dan praktik nyata para vestors. Semua orang tahu dan memahami bahwa ketika berbaring di bawah desktop, Anda perlu menyesuaikan situs di bawah lebar utama monitor: 1280, 1366, 1920. Jika Anda mengambil gambar gambar latar belakang, katakanlah, 1280 per 200, dan jangan tentukan latar belakangnya -Size, lalu layar dengan lebar lebih akan ada tempat kosong, gambar tidak akan mengisi lebar sepenuhnya.
Pada 99% kasus, ini tidak puas dengan pengembang web, sehingga mengatur ukuran latar belakang: penutup ke gambar selalu membentang ke maksimum di atas lebar jendela. Ini adalah penerimaan yang baik yang ingin Anda gunakan, tetapi sekarang Anda akan menemukan masalah yang pengguna dengan layar lebar tahun 1920 piksel dapat melihat gambar kualitas non-optimal.
Saya mengingatkan Anda, itu membentang ke lebar maksimum. Dengan demikian, kualitas akan memburuk secara otomatis. Satu-satunya solusi yang tepat akan digunakan untuk menggunakan gambar yang lebih besar - lebar 1920 piksel. Kemudian, pada layar terlebar, itu akan dalam ukuran alami, dan pada orang lain itu hanya akan secara perlahan memotong, tetapi pada saat yang sama, dengan pemilihan yang kompeten dari gambar latar belakang, itu tidak akan mempengaruhi penampilan situs tersebut .
Secara umum, ini hanya 1 contoh tentang cara menggunakan pengetahuan yang Anda terima dalam artikel ini, ketika meletakkan tata letak nyata.
Latar belakang transparan dengan CSS
Chip lain, yang dapat diimplementasikan menggunakan latar belakang CSS - transparan. Artinya, melalui latar belakang ini, Anda dapat melihat apa yang ada di belakangnya.
Misalnya, saya akan mendefinisikan seluruh halaman sebagai gambar gambar yang kami gunakan sebelumnya dalam contoh. Blok dengan pengidentifikasi BG, di mana kami menghabiskan semua eksperimen kami, mengatur latar belakang menggunakan format tugas warna RGBA.
Seperti yang telah saya katakan sebelumnya, ada banyak format di CSS untuk menentukan warna. Salah satunya adalah RGB, format yang cukup terkenal bagi mereka yang bekerja di editor. Tertulis sebagai berikut: RGB (17, 255, 34);
Makna pertama dalam tanda kurung jenuh dengan warna merah, lalu hijau, lalu biru. Nilai dapat numerik dari 0 hingga 255. Dengan demikian, format RGBA tidak berbeda, hanya parameter lain yang ditambahkan - saluran alpha. Nilai dapat dari 0 hingga 1, di mana 0 adalah transparansi lengkap.
Halo, situs web pembaca blog yang terhormat. Hari ini kita akan melihat lima aturan CSS yang memungkinkan Anda untuk menetapkan latar belakang untuk elemen apa pun dalam HTML - posisi latar belakang (gambar, ulangi, warna, lampiran). Nah, dan tentang aturan komposit, latar belakang tidak akan lupa untuk menyebutkan.
Tidak ada yang sulit dalam hal ini, tetapi ada seluk-beluk dan nuansa tertentu yang perlu Anda ketahui dan sudah siap untuk template (ingat pro, yang akan membantu untuk membuka semua penghapusan desain apa pun).
Sekali lagi saya mengingatkan Anda bahwa artikel ini termasuk dalam seri dan hal terbaik adalah untuk mulai mempelajari markup gaya pada awalnya, yaitu dari artikel tentang apa CSS dan dengan apa yang dimakan, baik, dan kemudian ikuti Pesanan ditentukan dalam direktori. Meskipun, dalam hal apa pun, Anda memutuskan untuk Anda, dan sekarang mari kita bicara tentang tugas latar belakang.
Warna, warna latar belakang dan gambar latar belakang
Pertama-tama mari kita lihat bagaimana warna elemen HTML diatur menggunakan CSS Aturan Warna.. Bahkan, semuanya sederhana. Sintaks benar-benar biasa dan warna yang dapat Anda atur sesuai dengan bagaimana hal itu dilakukan dalam bahasa hypertext markup. Bagaimana Anda ingat mengatur setelah tanda kisi (Hesha - "# Fe35A3"), atau dengan bantuan tiga digit, jika pertama bertepatan dengan nilai kedua, ketiga dengan keempat, baik, dan kelima, dan yang kelima, Dengan keenam (kode warna "# AA33FF" Anda dapat merekam secara singkat sebagai "A3F").
Juga, warna dalam kode HTML dan CSS dapat direpresentasikan sebagai kata (misalnya, "merah"), tetapi kode heksadesimal paling sering digunakan:
Warna: # 303
Misalnya, saya melukis paragraf kecil ini ke warna yang di atas (# 303). Sekarang sedikit berbeda dari warna semua paragraf lainnya (lebih gelap), yang ditanyakan sebagai # 555 dalam file CSS menggunakan tema WordPress. Tetapi tugas warna melalui warna cukup sederhana, tetapi dengan latar belakang itu akan sedikit lebih rumit.
Begitu, untuk latar belakang dalam CSS Jawab lima aturan yang, jika diinginkan, dapat digabungkan menjadi satu tim. Untuk melihat mereka, Anda dapat pergi ke halaman spesifikasi konsorsium W3C dan mencari di sana dengan latar belakang kata:
- warna latar belakang - dengan aturan ini, warna latar belakang diatur untuk elemen HTML apa pun. Itu dapat menggunakan kode atau nama naungan, I.E. Semua persis seperti saat ini menggunakan warna.
gambar latar belakang - menggunakannya, Anda dapat menggunakan gambar sebagai latar belakang sebagai latar belakang (tetapi pastikan untuk membaca tentang itu, untuk gambar berat akan memperlambat pemuatan halaman), jalur yang akan ditentukan dalam fungsionalitas URL () .
Jika Anda melihat spesifikasi, Anda akan melihatnya latar belakang warna default. Dalam elemen apa pun akan ada transparan (nilai default "latar belakang-warna: transparan" aturan). Benar, dalam elemen, itu tidak akan transparan secara default, karena Ini adalah elemen sistemik dan mereka memiliki segalanya berbeda dan berbeda dari tag biasa dari bahasa markup hypertext.
Warna dalam warna latar belakang ditetapkan standar (enam atau tiga angka kode heksadesimal, atau kata):
Latar Belakang - Warna: #FEFCDE
Misalnya, latar belakang paragraf ini diberikan persis melalui warna latar belakang dengan kode warna yang sedikit lebih tinggi.
Semua aturan CSS lainnya hanya akan menyentuh gambar latar belakang, yang dapat ditentukan untuk elemen HTML apa pun dan, jika diinginkan, secara tepat diposisikan. File grafis mana yang akan digunakan, Anda dapat mengatur penggunaan gambar latar belakang..
Jika Anda melihat spesifikasi bahasa markup gaya, Anda akan melihat bahwa nilai "tidak ada" default digunakan secara default (mis., Tidak ada gambar untuk latar belakang yang digunakan). Nah, jika masih diperlukan, maka dalam fungsi URL () Anda perlu menentukan jalur untuk itu:
Latar Belakang-Gambar: URL (https: //set/image/comment_top_focus.gif);
Misalnya, untuk paragraf ini saya menggunakan file grafis dengan latar belakang, jalur yang dijelaskan sedikit di atas. Anda melihat bahwa seluruh area yang ditugaskan untuk paragraf ini ditutupi dengan gambar berulang, yang dalam aslinya memiliki jenis ini:
Itu. Saat menggunakan hanya satu aturan gambar latar belakang, yang menunjukkan jalur ke file grafik, gambar ini akan dikalikan dengan vertikal dan horizontal hingga mencakup seluruh area yang dialokasikan pada halaman web di bawah elemen HTML khusus ini (dalam contoh kami adalah paragraf ). Mengapa ini terjadi?
Latar Belakang-Berulang-Ulangi Gambar Latar Belakang
Ya, karena kami tidak meresepkan nilai apa pun untuk aturan CSS ulangi latar belakang.Jadi itu akan digunakan untuk itu bahwa nilai default akan digunakan. Melihat spesifikasi, kita belajar bahwa nilai ini sesuai dengan "ulangi" (ulangi gambar pada semua sumbu). Jawabannya ditemukan sendiri.
Akibatnya, menggunakan latar belakang-ulangi kita bisa mengendarai repetisi gambar latar belakang. Aturan ini hanya dapat memiliki empat nilai:
Posisi Latar Belakang - Posisi Latar Belakang
Sekarang pertanyaan muncul, dan apakah gambar latar belakang dapat dipindahkan dari sudut kiri atas wilayah yang membatasi ukuran elemen. Tentu saja, itu mungkin, dan untuk tujuan ini melayani aturan terpisah posisi latar belakang:
Melihat spesifikasi CSS, menjadi jelas mengapa gambar latar belakang ditekan secara default ke tepi kiri atas area HTML dari elemen. Karena nilainya "0% 0%" adalah default untuk aturan posisi latar belakang.
Nah, ketika aturan ini ditentukan secara eksplisit untuk elemen (seperti dalam kasus kami), browser memilih artinya yang diterima dalam spesifikasi default (saya perhatikan bahwa laporan sumbu koordinat dalam CSS dilakukan dari tepi kiri atas elemen wilayah).
Selain itu, dapat dilihat dari spesifikasi bahwa untuk memposisikan gambar latar belakang menggunakan posisi latar belakang, Anda dapat menggunakan relatif (persentase) dan nilai absolut (misalnya,). Nah, dan juga Anda dapat menggunakan kata-kata yang akan sesuai dengan nilai digital tertentu. Tapi semuanya sudah beres.
Saat menentukan posisi gambar latar belakang menggunakan unit absolut Dalam posisi latar belakang, ada prinsip berikut untuk mendefinisikan posisi akhirnya:
Itu. Browser akan menghitung indentasi yang ditentukan pada sumbu X dan Y dari asal area di mana objek diposisikan sebelum koordinat gambar ini sendiri. Misalnya, dalam paragraf ini saya memposisikan gambar latar belakang melalui posisi latar belakang menggunakan aturan CSS berikut:
Latar Belakang-Gambar: URL (https: //syt/image/logo.png); Latar Belakang-REATER: Tidak berulang; Posisi latar: 400px 25px;
Harap dicatat bahwa dalam hal ini akan diselaraskan di tengah area tampilan, dan bukan di tengah area yang dialokasikan di bawah paragraf ini. Jelas bahwa pada kenyataannya, penempatan gambar latar belakang ini tidak mungkin menemukan aplikasi.
Namun, jika Anda menentukan posisi latar belakang tetap untuk elemen-elemen seperti body atau html (yaitu dalam tag yang mencakup seluruh halaman web), maka gambar ini akan selalu terlihat di area tampilan dan itu adalah aplikasi yang menemukan css latar belakang- Properti lampiran dalam tata letak blok modern.
Apakah ada lagi latar belakang aturan prefabrikasi.yang memungkinkan Anda untuk menggabungkan semua lima aturan yang dijelaskan di atas dalam satu botol. Selain itu, nilai-nilai untuk kelima versi pracetak dapat digunakan dalam urutan apa pun dan dalam jumlah berapa pun (mereka unik dan browser tidak membingungkan mereka satu sama lain). Yang Anda tidak secara eksplisit menentukan peramban akan mempertimbangkan nilai default yang sama.
Png) tidak berulang 50%;
Aturan prefabrikasi yang ditunjukkan dalam contoh diterapkan pada paragraf ini untuk kejelasan. Ternyata tidak cantik, tetapi itu tidak penting. Untuk bagian ini, isian latar belakang warna kuning aneh digunakan, serta gambar logo LoyvInternet, selaras di tengah paragraf. Karena Untuk aturan latar belakang-lampiran, tidak ada nilai yang diatur, ia menggunakan nilai gulir (default).
Jika untuk beberapa item yang ingin Anda atur hanya dengan warna, dan dengan latar belakang, gambar tidak mengganggu, maka Anda mungkin sebaliknya:
Latar Belakang - Warna: #FEFCDE
menulis:
Latar belakang: #FEFCDE.
Untuk semua nilai lain dari aturan koleksi akan diambil secara default, dan Anda membutuhkannya.
Semoga sukses untukmu! Untuk pertemuan ambigu di situs web halaman blog
Anda mungkin tertarik
Daftar gaya (ketik, gambar, posisi) - Aturan CSS untuk mengkonfigurasi tampilan daftar dalam kode HTML Cara mengkonfigurasi ganti string warna latar belakang tabel, daftar, dan item HTML lainnya di situs menggunakan pseudoclass NTH-ANAK 
Posisi (absolut, relatif dan tetap) - cara untuk memposisikan elemen HTML dalam CSS (aturan kiri, kanan, atas dan bawah) 
Mengapung dan jelas di CSS - blok alat tata letak 
Posisi dengan z-index dan aturan kursor CSS untuk mengubah kursor mouse 
Padding, margin dan perbatasan - kami bertanya dalam indentasi internal dan eksternal CSS, serta RAMCIDL semua sisi (atas, bawah, kiri, kanan) 
Tampilan (blok, tidak ada, inline) dalam CSS - Tentukan jenis tampilan elemen HTML di halaman web 
Prioritas dalam CSS dan peningkatan mereka dengan pemilih yang penting, kombinasi dan pengelompokan, gaya pengguna dan hak cipta 
CSS - Apa itu, sebagai tabel gaya cascading terhubung ke kode HTML menggunakan gaya dan tautan 
Pemilih tag, kelas (kelas), ID dan universal, serta daya tarik atribut dalam CSS modern
Saya pikir tidak ada satu situs di mana properti tidak akan digunakan. Latar belakang CSS.. Tampaknya mungkin lebih mudah untuk properti ini? Tetapi tidak, kemampuannya jauh lebih luas daripada tujuan gambar atau warna yang biasa sebagai latar belakang halaman. Sesuatu akan akrab, dan sesuatu yang pasti akan menjadi kebaruan bagi banyak orang. Bagaimanapun, Anda akan benar-benar tahu bagaimana pekerjaan latar belakang akan bermanfaat.
CSS3 membawa banyak yang baru, ini adalah transparansi, dan tujuan dari beberapa gambar sebagai latar belakang, tetapi kami akan membicarakannya di bawah ini, dan untuk permulaan, pertimbangkan dasar-dasar properti latar Belakang..
warna latar belakang.
Saya lebih percaya diri - Anda telah berulang kali membuat pengangkatan warna latar belakang. Anda dapat melakukan ini menggunakan beberapa jenis catatan: yang biasa (nama warna), rekam heksadesimal atau RGB. Setiap jenis setara, gunakan yang lebih seperti itu. Saya mencoba menggunakan opsi terpendek, dan untuk persepsi lebih mudah dan file gaya sedikit lebih kecil dari ukuran.
P (latar belakang-warna: merah;) p (latar belakang-warna: # f00;) p (latar belakang-warna: # ff0000;) p (latar belakang-warna: RGB (255, 0, 0;))
Dalam CSS3, dukungan transparansi diperkenalkan, sehingga Anda dapat menambahkannya ke warna kami, misalnya, jadi:
P (Latar Belakang-warna: RGBA (255, 0, 0, 0,5);)
Digit terakhir telah menetapkan transparansi 50%. Anda dapat mengatur nilai transparansi dari 0 (latar belakang yang sepenuhnya transparan) ke 1 (benar-benar buram).
gambar latar belakang.
Properti ini juga sering digunakan, memungkinkan Anda untuk menetapkan gambar ke latar belakang. CSS3 menambahkan kemampuan untuk menetapkan beberapa gambar ke latar belakang, dan masing-masing membuat lapisan aneh, sehingga setiap selanjutnya ditumpangkan pada yang sebelumnya. Mengapa ini bisa berguna? Semuanya cukup sederhana - katakanlah, Anda perlu mengikat terburu-buru di masing-masing sudut situs. Tunduk pada tata letak karet yang kurang lebih, gunakan satu gambar bukanlah suatu pilihan. Oleh karena itu, kami membuat 4 "lapisan", setiap gambar bergerak ke sudut Anda dan pada semuanya, tugas diselesaikan
Tubuh (image1), URL ("Image2"), URL ("Image3"))
Jika Anda perlu menetapkan satu gambar pada latar belakang - dalam kode, kami hanya pergi dulu, saya pikir itu bisa dimengerti.
Menggunakan gambar apa saja sebagai latar belakang, dua aturan harus diingat:
- tetapkan latar belakang kontras latar belakang jika pengguna untuk beberapa alasan tidak muncul gambar. Ini dapat dengan benar menonaktifkan tampilan gambar, menghemat lalu lintas.
- jangan gunakan gambar latar belakang untuk mentransfer informasi penting. Karena di atas, pengguna mungkin tidak melihat.
Dukungan untuk beberapa gambar untuk latar belakang cukup lebar. Semua browser, bahkan IE8, mendukung properti ini.
Informasi singkat
Versi css.
Nilai-nilai
URL Jalur ke file grafik digunakan sebagai nilai, yang ditentukan di dalam desain URL (). Jalur ke file dapat ditulis baik dalam kutipan (ganda atau tunggal), dan tanpa mereka. Tidak ada yang membatalkan gambar latar belakang untuk elemen. Mewarisi mewarisi nilai induk.Html5 css2.1 yaitu cr op sa fx
Object Model.
document.getelementbyid ("elementid") .tyle.backgroundImage
Browser
Internet Explorer ke versi 7.0 secara inklusif menerapkan latar belakang ke bagian dalam batas elemen, yang memiliki properti HASLAYOUT. Jika elemen tidak memiliki HASLAYOUT, properti gambar latar belakang akan memperhitungkan batas-batas elemen, seperti yang ditentukan dalam spesifikasi. Perbedaan pemetaan akan terlihat jika batas putus-putus (putus-putus atau putus-putus), dan tidak padat.
Jika nilainya ditetapkan sebagai gulir atau otomatis untuk suatu item, di Internet Explorer 8 akan ada penundaan vertikal dalam satu piksel saat menggulir latar belakang.
Internet Explorer sebelum versi 7.0 tidak mendukung nilai Warisan.
Jika latar belakang diatur untuk baris tabel (tag
Html5 css2.1 yaitu cr op sa fx
| 1 | 2 | 3 |
Hasil dari contoh ini di browser Chrome ditunjukkan pada Gambar. 1. Internet Explorer, Opera dan Firefox Browser dengan benar menampilkan latar belakang untuk string (Gbr. 2).
Ara. 1. Ulangi latar belakang untuk setiap sel
Ara. 2. Latar belakang untuk seluruh baris
