Dari penulis: Halo semuanya. Warna dan gambar latar belakang memainkan peran besar dalam desain web, karena memungkinkan Anda mendesain elemen apa pun dengan lebih menarik. Hari ini kita akan melihat cara membuat latar belakang dalam HTML.
Apakah mungkin menggunakan HTML untuk mengatur latar belakang?
Saya akan segera mengatakan bahwa tidak. Secara umum, html tidak dibuat untuk mendesain halaman web. Itu sangat merepotkan. Misalnya, ada atribut bgcolor yang dapat digunakan untuk mengatur warna latar belakang, tetapi ini sangat merepotkan.
Oleh karena itu, kami akan menggunakan Cascading Style Sheets (CSS). Ada lebih banyak peluang untuk menetapkan latar belakang. Hari ini kita akan melihat yang paling mendasar.
Bagaimana cara mengatur latar belakang menggunakan css?
Jadi, pertama-tama, Anda perlu memutuskan elemen mana yang ingin Anda atur latar belakangnya. Artinya, kita perlu menemukan pemilih yang akan kita tuliskan aturannya. Misalnya, jika Anda perlu mengatur latar belakang untuk seluruh halaman secara keseluruhan, Anda dapat melakukannya melalui pemilih isi, dan untuk semua blok melalui pemilih div. Yah, dll. Latar belakang dapat dan harus terikat pada penyeleksi lainnya: kelas gaya, pengidentifikasi, dll.
Setelah Anda memutuskan pemilihnya, Anda perlu menulis nama properti itu sendiri. Untuk mengatur warna latar belakang (yaitu warna solid, bukan gradien atau gambar), gunakan properti warna latar belakang. Setelah itu Anda perlu memberi titik dua dan menulis warnanya sendiri. Hal ini dapat dilakukan dengan berbagai cara. Misalnya menggunakan kata kunci, kode hex, format rgb, rgba, hsl. Metode apa pun bisa dilakukan.
Metode yang paling umum digunakan adalah kode heksadesimal. Untuk memilih warna, Anda dapat menggunakan program yang menampilkan kode warna. Misalnya photoshop, paint, atau alat online lainnya. Oleh karena itu, sebagai contoh, saya akan menulis latar belakang umum untuk keseluruhan halaman web.
tubuh (warna latar: #D4E6B3; )
Kode ini perlu dimasukkan ke bagian head. Penting agar file-file tersebut berada dalam folder yang sama.
Gambar sebagai latar belakang
Untuk gambarnya saya akan menggunakan ikon bahasa html kecil:
Mari buat blok kosong dengan pengidentifikasi:
< div id = "bg" > < / div > |
Mari kita berikan dimensi dan latar belakang yang eksplisit:
#bg( lebar: 400px; tinggi: 250px; gambar latar: url(html.png); )
#bg( lebar: 400 piksel; tinggi: 250 piksel; latar belakang - gambar : url (html .png ) ; |
Dari kode ini Anda dapat melihat bahwa saya menggunakan properti baru - gambar latar. Ini dimaksudkan khusus untuk menyisipkan gambar sebagai latar belakang elemen html. Mari kita lihat apa yang terjadi:
Untuk menentukan gambar, Anda harus menulis kata kunci url setelah titik dua, dan kemudian menunjukkan jalur ke file dalam tanda kurung. Dalam hal ini, jalur ditentukan berdasarkan fakta bahwa gambar tersebut berada di folder yang sama dengan dokumen html. Anda juga perlu menentukan format gambar.
Jika Anda sudah melakukan ini, dan latar belakang masih belum ditampilkan di blok, periksa kembali apakah Anda menulis nama gambar dengan benar, apakah jalur dan ekstensi sudah diatur dengan benar. Ini adalah alasan paling umum mengapa latar belakang tidak muncul karena browser tidak dapat menemukan gambarnya.
Tapi apakah Anda memperhatikan satu hal? Browser mengambil dan memperbanyak gambar di seluruh blok. Jadi, asal tahu saja, ini adalah perilaku default gambar latar belakang - gambar tersebut diulang secara vertikal dan horizontal selama dapat masuk ke dalam blok. Dengan perilaku ini Anda dapat dengan mudah mengontrolnya. Untuk melakukannya, gunakan properti background-repeat, yang memiliki 4 nilai utama:
Ulangi – nilai default, gambar diulang pada kedua sisi;
Ulangi-x – hanya mengulangi pada sumbu x;
Ulangi-y – hanya mengulangi sepanjang sumbu y;
Tanpa pengulangan – tidak mengulangi sama sekali;
Anda dapat menulis setiap nilai dan melihat apa yang terjadi. Saya akan menulisnya seperti ini:
ulangi latar belakang: ulangi-x;
latar belakang - ulangi : ulangi - x ; |
Sekarang ulangi hanya secara horizontal. Jika Anda menyetel no-repeat, maka hanya akan ada satu gambar.
Bagus, kita bisa menyelesaikannya di sini, karena ini adalah kemampuan dasar bekerja dengan latar belakang, tapi saya akan menunjukkan kepada Anda 2 properti lagi yang memungkinkan Anda mendapatkan kontrol lebih besar.
Melalui pengulangan, desainer tata letak biasanya mampu membuat tekstur latar belakang dan gradien menggunakan satu gambar kecil. Ukurannya bisa 30 kali 10 piksel atau bahkan lebih kecil. Atau mungkin lebih sedikit. Gambarnya dibuat sedemikian rupa sehingga ketika diulang pada satu atau bahkan kedua sisi, tidak ada transisi yang terlihat, sehingga hasilnya adalah satu latar belakang yang mulus. Omong-omong, pendekatan ini layak digunakan sekarang jika Anda ingin menggunakan tekstur mulus di situs web Anda sebagai latar belakang. Saat ini gradien sudah dapat diimplementasikan menggunakan metode css3, kita pasti akan membicarakannya nanti.
Posisi latar belakang
Secara default, gambar latar belakang, kecuali diatur untuk diulang, akan berada di sudut kiri atas bloknya. Namun posisinya dapat dengan mudah diubah menggunakan properti background-position.
Anda dapat mengaturnya dengan berbagai cara. Salah satu pilihannya adalah dengan menunjukkan sisi di mana gambar itu seharusnya ditempatkan:
posisi latar belakang: kanan atas;
latar belakang - posisi : kanan atas ; |
Artinya, secara vertikal semuanya tetap sama: gambar latar belakang terletak di atas, tetapi secara horizontal kita mengubah sisinya menjadi kanan, yaitu kanan. Cara lain untuk menetapkan posisi adalah sebagai persentase. Dalam hal ini, hitungan mundur dimulai dari sudut kiri atas. 100% - seluruh blok. Jadi, untuk menempatkan gambar tepat di tengah, kita tulis seperti ini:
posisi latar belakang: 50% 50%;
posisi latar belakang: 50% 50%; |
Ingat satu hal penting tentang penentuan posisi - parameter pertama selalu posisi horizontal, dan parameter kedua adalah posisi vertikal. Jadi jika melihat nilai 80% 20%, maka bisa langsung disimpulkan bahwa gambar background akan banyak bergeser ke kanan, namun tidak akan turun banyak.
Dan terakhir, Anda dapat menentukan posisi dalam piksel. Semuanya sama, hanya % yang akan ada px. Dalam beberapa kasus, penentuan posisi seperti itu mungkin diperlukan.
Notasi singkat
Setuju bahwa kode tersebut ternyata cukup rumit jika semuanya diatur seperti yang kita lakukan. Ternyata jalur menuju gambar itu perlu ditentukan, pengulangannya, dan posisinya. Tentu saja, pengulangan dan posisi tidak selalu diperlukan, tetapi bagaimanapun juga, akan lebih tepat jika menggunakan notasi steno untuk properti. Ini terlihat seperti ini:
latar belakang: #333 url(bg.jpg) tidak ada pengulangan 50% 50%;
latar belakang: #333 url(bg.jpg) tidak ada pengulangan 50% 50%; |
Artinya, langkah pertama adalah merekam warna latar belakang solid secara keseluruhan, jika diperlukan. Kemudian jalur menuju gambar, pengulangan dan posisi. Jika beberapa parameter tidak diperlukan, hilangkan saja. Setuju, ini jauh lebih cepat dan nyaman, dan kami juga mengurangi kode kami secara signifikan. Secara umum, saya menyarankan Anda untuk selalu menulis dalam bentuk singkatan, meskipun Anda hanya perlu mencantumkan warna atau gambar.
Mengontrol ukuran gambar latar belakang
Citra kita saat ini tidak terlalu bagus untuk mendemonstrasikan trik berikutnya, jadi saya akan mengambil yang lain. Biarlah ukurannya satu blok atau lebih besar. Jadi, bayangkan Anda dihadapkan pada tugas membuat gambar latar belakang agar tidak memenuhi bloknya sepenuhnya. Dan gambarnya, misalnya, bahkan lebih besar dari ukuran bloknya.
Apa yang dapat Anda lakukan dalam kasus ini? Tentu saja, opsi paling sederhana dan masuk akal adalah dengan memperkecil gambar, tetapi hal ini tidak selalu memungkinkan. Katakanlah itu ada di server dan saat ini tidak ada waktu atau kesempatan untuk menguranginya. Masalahnya dapat diselesaikan dengan menggunakan properti background-size, yang bisa disebut relatif baru dan memungkinkan Anda memanipulasi ukuran gambar latar belakang, dan tentu saja latar belakang apa pun.
Jadi gambar saya sekarang mengambil semua ruang di blok, tapi saya akan memberinya ukuran latar belakang:
ukuran latar belakang: 80% 50%;
ukuran latar belakang: 80% 50%; |
Sekali lagi, parameter pertama menetapkan ukuran horizontal, yang kedua - ukuran vertikal. Kami melihat bahwa semuanya diterapkan dengan benar - foto menjadi 80% dari lebar balok dan setengah tingginya. Di sini Anda hanya perlu membuat satu klarifikasi - dengan mengatur ukuran sebagai persentase, Anda dapat memengaruhi proporsi gambar. Jadi berhati-hatilah jika Anda tidak ingin mengganggu proporsinya.
Seperti yang bisa Anda tebak, ukuran latar belakang juga bisa ditentukan dalam piksel. Ada dua kata kunci lagi yang juga bisa digunakan:
Sampul – gambar akan diperkecil sehingga setidaknya di satu sisi memenuhi blok sepenuhnya.
Berisi – menskalakannya sehingga gambar benar-benar pas dengan blok pada ukuran maksimumnya.
Keuntungan dari nilai-nilai ini adalah tidak mengubah proporsi gambar, sehingga tetap sama.
Anda juga harus memahami bahwa meregangkan gambar dapat menurunkan kualitasnya. Saya dapat memberikan contoh dari kehidupan dan praktik nyata para desainer tata letak. Semua orang tahu dan memahami bahwa saat mendesain untuk desktop, Anda perlu menyesuaikan situs dengan lebar monitor utama: 1280, 1366, 1920. Jika Anda mengambil gambar latar belakang dengan ukuran, katakanlah, 1280 kali 200, dan jangan berikan itu ukuran latar belakang, lalu layar dengan lebar lebih besar Akan muncul ruang kosong, gambar tidak akan memenuhi lebarnya sepenuhnya.
Dalam 99% kasus, hal ini tidak sesuai dengan pengembang web, jadi dia menyetel ukuran latar belakang: penutup sehingga gambar selalu melebar hingga lebar maksimum jendela. Ini adalah teknik yang bagus untuk digunakan, tetapi sekarang Anda akan dihadapkan pada masalah bahwa pengguna dengan lebar layar 1920 piksel mungkin melihat kualitas gambar yang kurang optimal.
Izinkan saya mengingatkan Anda, itu akan meregang hingga lebar maksimumnya. Dengan demikian, kualitasnya otomatis menurun. Satu-satunya solusi yang tepat di sini adalah dengan menggunakan gambar yang lebih besar – lebar 1920 piksel. Kemudian pada layar terluas itu akan berada dalam ukuran aslinya, dan pada layar lain itu akan terpotong secara bertahap, tetapi pada saat yang sama, jika gambar latar belakang dipilih dengan benar, ini tidak akan mempengaruhi tampilan situs.
Secara umum, ini hanyalah 1 contoh bagaimana menggunakan pengetahuan yang Anda peroleh di artikel ini saat menyusun tata letak sebenarnya.
Latar belakang tembus pandang menggunakan css
Fitur lain yang dapat diimplementasikan menggunakan css adalah latar belakang transparan. Artinya, melalui latar belakang ini akan terlihat apa yang ada di baliknya.
Sebagai contoh, saya akan mengatur seluruh halaman sebagai latar belakang gambar yang kita gunakan sebelumnya dalam contoh. Untuk blok dengan pengidentifikasi bg, tempat kami melakukan semua eksperimen, kami akan menyetel latar belakang menggunakan format pengaturan warna rgba.
Seperti yang saya katakan sebelumnya, ada banyak format untuk mengatur warna di CSS. Salah satunya adalah RGB, format yang cukup terkenal bagi mereka yang bekerja di bidang editor grafis. Ada tertulis seperti ini: rgb(17, 255, 34);
Nilai pertama dalam tanda kurung adalah saturasi warna merah, lalu hijau, lalu biru. Nilainya bisa berupa numerik dari 0 hingga 255. Oleh karena itu, format rgba juga demikian, hanya satu parameter lagi yang ditambahkan - saluran alfa. Nilainya bisa dari 0 hingga 1, dimana 0 adalah transparansi penuh.
informasi singkat
versi CSS
Nilai-nilai
url Nilainya adalah jalur ke file grafik, yang ditentukan di dalam konstruksi url(). Jalur ke file dapat ditulis dalam tanda kutip (ganda atau tunggal) atau tanpa tanda kutip. none Menonaktifkan gambar latar belakang untuk elemen tersebut. mewarisi Mewarisi nilai orang tua.HTML5 CSS2.1 YAITU Cr Op Sa Fx
Model objek
dokumen.getElementById("elementID ").style.backgroundImage
Peramban
Versi Internet Explorer hingga dan termasuk 7.0 menerapkan latar belakang ke batas dalam elemen yang memiliki kumpulan properti hasLayout. Jika elemen tidak memiliki hasLayout , properti background-image akan mengikuti batas elemen, seperti yang ditentukan dalam spesifikasi. Perbedaan tampilan akan terlihat jika batasnya dibuat putus-putus atau putus-putus, bukan padat.
Jika elemen diatur ke gulir atau otomatis , Internet Explorer 8 akan memiliki penundaan vertikal satu piksel saat latar belakang bergulir.
Versi Internet Explorer hingga dan termasuk 7.0 tidak mendukung nilai warisan.
Jika latar belakang disetel 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. Browser Internet Explorer, Opera dan Firefox menampilkan latar belakang baris dengan benar (Gbr. 2).
Beras. 1. Ulangi latar belakang untuk setiap sel
Beras. 2. Latar belakang untuk keseluruhan baris
Saya pikir tidak ada satu situs pun yang propertinya tidak digunakan latar belakang CSS. Tampaknya, apa yang lebih sederhana dari properti ini? Tapi tidak, kemampuannya jauh lebih luas daripada penetapan gambar atau warna biasa sebagai latar belakang halaman. Beberapa hal mungkin familier, sementara yang lain mungkin baru bagi banyak orang. Bagaimanapun, akan berguna untuk mengetahui secara menyeluruh cara kerja latar belakang.
CSS3 membawa banyak hal baru ke properti, seperti transparansi dan menetapkan beberapa gambar sebagai latar belakang, tapi kita akan membicarakannya di bawah, tapi pertama-tama kita akan melihat dasar-dasar properti latar belakang.
warna latar belakang
Saya yakin Anda telah menetapkan warna latar belakang lebih dari sekali. Hal ini dapat dilakukan dengan menggunakan beberapa jenis notasi: reguler (nama warna yang digunakan), notasi heksadesimal, atau RGB. Setiap jenis setara, gunakan mana yang paling Anda sukai. Saya mencoba menggunakan opsi terpendek, dan untuk memudahkan persepsi, file gaya yang dihasilkan berukuran sedikit lebih kecil.
P (warna latar: merah;) p (warna latar: #f00;) p (warna latar: #ff0000;) p (warna latar: rgb(255, 0, 0;))
CSS3 mendukung transparansi, jadi kita bisa menambahkannya pada warna kita, contohnya seperti ini:
P (warna latar belakang: rgba(255, 0, 0, 0.5);)
Angka terakhir mengatur transparansi menjadi 50%. Anda dapat mengatur nilai transparansi dari 0 (latar belakang sepenuhnya transparan) hingga 1 (sepenuhnya buram).
gambar latar belakang
Properti ini juga sangat sering digunakan, memungkinkan Anda untuk menetapkan gambar ke latar belakang. CSS3 telah menambahkan kemampuan untuk menetapkan beberapa gambar ke latar belakang, masing-masing membuat lapisannya sendiri, sehingga setiap gambar berikutnya tumpang tindih dengan gambar sebelumnya. Mengapa ini mungkin berguna? Semuanya cukup sederhana - katakanlah Anda perlu memasang embel-embel kecil di setiap sudut situs. Mengingat tata letak yang lebih atau kurang kenyal, menggunakan satu gambar bukanlah suatu pilihan. Oleh karena itu, kami membuat 4 "lapisan", memindahkan setiap gambar ke sudutnya masing-masing dan itu saja, masalahnya terpecahkan
Isi (gambar latar belakang: url("gambar1"), url("gambar2"), url("gambar3"))
Jika Anda perlu menetapkan satu gambar ke latar belakang, kami hanya menyisakan gambar pertama di kode, saya rasa ini bisa dimengerti.
Saat menggunakan gambar apa pun sebagai latar belakang, Anda harus mengingat dua aturan:
- atur warna latar belakang yang kontras jika pengguna tidak melihat gambar karena alasan tertentu. Itu hanya dapat mematikan tampilan gambar, menghemat lalu lintas.
- Jangan gunakan gambar latar belakang untuk menyampaikan informasi penting apa pun. Karena alasan yang disebutkan di atas, pengguna mungkin tidak melihatnya.
Dukungan untuk banyak gambar latar belakang cukup luas. Semua browser, bahkan IE8, mendukung properti ini.
Halo, para pembaca situs blog yang budiman. Hari ini kita akan melihat lima aturan CSS yang memungkinkan Anda menyetel latar belakang untuk elemen apa pun di Html - posisi latar belakang (gambar, ulangi, warna, lampiran). Nah, jangan lupa juga untuk menyebutkan aturan gabungan Latar Belakang.
Tidak ada yang rumit dalam hal ini, tetapi ada kehalusan dan nuansa tertentu yang perlu Anda ketahui tentang template yang sudah jadi (ingat, yang akan membantu mengungkap semua seluk beluk desain apa pun).
Izinkan saya mengingatkan Anda sekali lagi bahwa artikel ini adalah bagian dari sebuah seri dan sebaiknya mulai mempelajari style markup dari awal, yaitu dengan artikel tentang apa itu CSS dan kegunaannya, lalu ikuti urutan yang diberikan. dalam buku referensi. Meskipun, bagaimanapun, itu terserah Anda, tapi sekarang mari kita bicara tentang pengaturan latar belakang.
Warna, warna latar dan gambar latar
Pertama mari kita lihat cara mengatur warna elemen Html menggunakan Aturan warna css. Faktanya, semuanya sederhana di sini. Sintaksnya sepenuhnya normal dan Anda dapat mengatur warnanya sesuai dengan cara yang dilakukan dalam bahasa markup hypertext. Seperti yang Anda ingat, ditempatkan setelah tanda pagar (hash - “#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 ( kode warna “#aa33ff” dapat ditulis secara singkat sebagai "a3f").
Selain itu, warna dalam kode Html dan Css dapat direpresentasikan dalam bentuk kata (misalnya, “merah”), tetapi yang paling sering digunakan adalah kode heksadesimal:
Warna:#303
Sebagai contoh, saya mewarnai paragraf kecil ini dengan warna yang sama seperti di atas (#303). Sekarang sedikit berbeda dari warna paragraf lainnya (lebih gelap), yang disetel ke #555 di file CSS tema WordPress yang saya gunakan. Namun pengaturan warna menggunakan warna cukup sederhana, namun dengan background akan sedikit lebih rumit.
Jadi, untuk latar belakang di Css Ada lima aturan yang bisa digabungkan menjadi satu jika diinginkan. Untuk melihatnya, Anda dapat membuka halaman spesifikasi W3C saat ini dan mencari apa pun yang memiliki kata Latar Belakang:
- warna latar belakang - menggunakan aturan ini, Anda mengatur warna latar belakang untuk elemen HTML apa pun. Anda dapat menggunakan kode atau nama bayangan, mis. semuanya sama persis seperti saat menggunakan warna.
gambar latar belakang - dengan itu Anda dapat menggunakan gambar sebagai latar belakang (tetapi pastikan untuk membacanya, karena gambar yang berat akan memperlambat pemuatan halaman), jalur yang akan ditunjukkan dalam fungsi url ().
Jika Anda melihat spesifikasinya, Anda akan melihatnya warna latar belakang default elemen apa pun akan transparan (nilai default aturannya adalah “warna latar: transparan”). Benar, dalam elemen itu tidak akan transparan secara default, karena Ini adalah elemen sistem dan segala sesuatu di dalamnya berbeda dan berbeda dari tag bahasa markup hypertext biasa.
Warna dalam warna latar ditetapkan sebagai standar (enam atau tiga digit kode heksadesimal, atau satu kata):
Warna latar:#FEFCDE
Misalnya, latar belakang paragraf ini ditentukan menggunakan warna latar belakang dengan kode warna yang diberikan tepat di atas.
Keempat aturan CSS lainnya hanya akan menyangkut gambar latar belakang, yang dapat disetel untuk elemen Html apa pun dan, jika diinginkan, diposisikan secara tepat. File grafik mana yang akan digunakan dapat ditentukan menggunakan gambar latar belakang.
Jika Anda melihat spesifikasi bahasa markup, Anda akan melihat bahwa gambar latar defaultnya adalah "tidak ada" (yaitu, tidak ada gambar yang digunakan sebagai latar belakang). Nah, jika Anda masih memerlukannya, maka dalam fungsi url() Anda perlu menunjukkan jalur ke sana:
Gambar latar belakang:url(https://site/image/comment_top_focus.gif);
Misalnya, untuk paragraf ini saya menggunakan file grafik dengan latar belakang, jalurnya dijelaskan tepat di atas. Anda melihat bahwa seluruh area yang dialokasikan untuk paragraf ini ditutupi dengan gambar berulang, yang aslinya terlihat seperti ini:
Itu. ketika hanya menggunakan satu aturan gambar latar belakang yang menunjukkan jalur ke file grafik, gambar yang sama ini akan dikalikan baik secara vertikal maupun horizontal hingga mencakup seluruh area yang dialokasikan pada halaman web untuk elemen Html spesifik ini (dalam contoh kami, itu adalah sebuah paragraf). Mengapa ini terjadi?
Background-repeat - mengulang gambar latar belakang
Ya, karena kami tidak menentukan nilai apa pun untuk aturan CSS ulangi latar belakang, yang berarti nilai default akan digunakan untuk itu. Melihat spesifikasinya, kami menemukan bahwa nilai ini sesuai dengan “repeat” (mengulang gambar pada semua sumbu). Jawabannya datang secara alami.
Oleh karena itu, dengan pengulangan latar belakang kita bisa mengelola pengulangan gambar latar belakang. Aturan ini hanya memiliki empat arti:
Posisi latar belakang - posisi latar belakang
Sekarang muncul pertanyaan: apakah mungkin untuk memindahkan gambar latar belakang dari sudut kiri atas area yang membatasi ukuran elemen. Tentu saja bisa, dan ada aturan tersendiri untuk tujuan ini. posisi latar belakang:
Melihat spesifikasi CSS, menjadi jelas mengapa gambar latar belakang secara default ditekan tepat di tepi kiri atas area elemen Html. Karena nilai "0% 0%" adalah nilai default untuk aturan posisi latar belakang.
Nah, ketika aturan ini tidak secara eksplisit ditetapkan untuk suatu elemen (seperti dalam kasus kami), browser memilih nilainya, yang diterima dalam spesifikasi secara default (perhatikan bahwa sumbu koordinat dalam CSS dilaporkan persis dari tepi kiri atas dari elemen luas).
Dari spesifikasinya juga jelas bahwa untuk memposisikan gambar latar belakang menggunakan posisi latar belakang, Anda dapat menggunakan nilai relatif (persentase) dan nilai absolut (misalnya, ). Nah, Anda juga bisa menggunakan kata-kata yang sesuai dengan nilai digital tertentu. Tapi hal pertama yang pertama.
Saat mengatur posisi gambar latar belakang menggunakan satuan absolut di posisi latar belakang prinsip berikut digunakan untuk menentukan posisi akhirnya:
Itu. browser akan menghitung offset yang ditentukan sepanjang sumbu X dan Y dari asal area di mana objek diposisikan hingga asal gambar itu sendiri. Misalnya pada paragraf ini saya memposisikan gambar background melalui posisi background menggunakan aturan CSS berikut:
Gambar Latar Belakang:url(https://site/image/logo.png); latar belakang-ulangi:tidak berulang; posisi latar belakang:400px 25px;
Harap dicatat bahwa dalam hal ini akan disejajarkan dengan bagian tengah area tampilan, dan bukan dengan bagian tengah area yang dialokasikan untuk paragraf ini. Jelas bahwa pada kenyataannya penempatan gambar latar belakang seperti itu tidak mungkin digunakan.
Namun, jika Anda menetapkan posisi latar belakang tetap untuk elemen seperti Body atau Html (yaitu dalam tag yang menutupi seluruh halaman web), maka gambar ini akan selalu terlihat di viewport dan inilah tepatnya penggunaan lampiran latar belakang CSS. properti dalam tata letak blok modern.
Apakah masih ada lagi Latar Belakang aturan prefabrikasi, yang memungkinkan Anda menggabungkan kelima aturan yang dijelaskan di atas dalam satu botol. Selain itu, nilai untuk kelimanya dalam versi gabungan dapat digunakan dalam urutan apa pun dan dalam jumlah berapa pun (nilainya unik dan browser tidak akan membingungkannya satu sama lain). Apa pun yang tidak Anda tentukan secara eksplisit akan dianggap oleh browser sebagai nilai default.
png) tidak ada pengulangan 50%;
Contoh aturan cetakan diterapkan pada paragraf ini untuk kejelasan. Ternyata tidak bagus, tapi itu bukan yang utama. Paragraf ini menggunakan isian latar belakang kuning yang aneh, dan juga menggunakan gambar logo Liveinternet yang disejajarkan dengan tengah paragraf. Karena Jika aturan lampiran latar belakang tidak diberi nilai apa pun, maka nilai gulir (default) yang digunakan.
Jika untuk beberapa elemen Anda hanya ingin mengatur isian warna dan tidak mengganggu gambar latar belakang, maka Anda dapat melakukan ini:
Warna latar:#FEFCDE
menulis:
Latar Belakang:#FEFCDE
Karena semua nilai aturan prefab lainnya akan diambil secara default, dan itulah yang Anda butuhkan.
Semoga beruntung untukmu! Sampai jumpa lagi di halaman situs blog
Anda mungkin tertarik
Gaya daftar (tipe, gambar, posisi) - Aturan Css untuk menyesuaikan tampilan daftar dalam kode Html Cara mengonfigurasi warna latar belakang bergantian dari baris tabel, daftar, dan elemen Html lainnya di situs menggunakan kelas semu anak ke-n 
Posisi (absolut, relatif dan tetap) - cara memposisikan elemen Html di CSS (aturan kiri, kanan, atas dan bawah) 
Float dan clear di CSS - alat tata letak blok 
Pemosisian menggunakan indeks Z dan aturan Kursor CSS untuk mengubah kursor mouse 
Padding, Margin dan Border - mengatur padding internal dan eksternal di CSS, serta batas untuk semua sisi (atas, bawah, kiri, kanan) 
Tampilan (blok, tidak ada, sebaris) dalam CSS - mengatur jenis tampilan elemen Html pada halaman web 
Prioritas dalam Css dan peningkatannya karena Penting, kombinasi dan pengelompokan penyeleksi, gaya pengguna dan penulis 
CSS - apa itu, bagaimana cascading style sheet dihubungkan ke kode Html menggunakan Style dan Link 
Pemilih tag, kelas, Id dan universal, serta pemilih atribut dalam CSS modern
