CSS'de arka plan (renk, konum, görüntü, yineleme, ek) - tümü Html öğelerinin arka plan rengini veya arka plan görüntüsünü ayarlamak için. CSS Arka Planı. Bir css Görüntüsünü Tekrar Etmek İçin Tam Kılavuz
Yazardan: Herkese hoş geldiniz. Arka plan renkleri ve resimleri, herhangi bir öğenin daha çekici bir şekilde tasarlanmasına izin verdiği için web tasarımında büyük bir rol oynar. Bugün html'de nasıl arka plan oluşturulacağına bakacağız.
Arka planı ayarlarken html ile idare etmek mümkün mü?
Hemen hayır demeliyim. Genellikle html, web sayfalarını biçimlendirmek için tasarlanmamıştır. Bu çok zahmetli. Örneğin, arka plan rengini ayarlayabileceğiniz bir bgcolor niteliği vardır, ancak bu çok sakıncalıdır.
Buna göre, basamaklı stil sayfaları (css) kullanacağız. Arka planı ayarlamak için daha birçok fırsat var. Bugün en temel olanlarını analiz edeceğiz.
Arka planı css ile nasıl ayarlarım?
Bu nedenle, her şeyden önce, arka planı ayarlamak için hangi öğeye ihtiyacınız olduğuna karar vermelisiniz. Yani, kuralı yazacağımız seçiciyi bulmamız gerekiyor. Örneğin, arka planın bir bütün olarak sayfanın tamamı için ayarlanması gerekiyorsa, bunu tüm bloklar için gövde seçici aracılığıyla div seçici aracılığıyla yapabilirsiniz. Peki, vb. Arka plan, diğer seçicilere bağlanabilir ve bağlanmalıdır: stil sınıfları, tanımlayıcılar vb.
Seçiciye karar verdikten sonra, mülkün adını yazmanız gerekir. Arka plan rengini ayarlamak için (gradyan veya görüntü değil, yalnızca düz bir renk) arka plan rengi özelliğini kullanın. Ondan sonra bir kolon koymanız ve rengin kendisini yazmanız gerekir. Bu, farklı şekillerde yapılabilir. Örneğin, anahtar sözcükler, onaltılık kod, rgb, rgba, hsl biçimleri kullanma. Herhangi bir yöntem işe yarar.
En yaygın kullanılan yöntem onaltılık koddur. Renk uyumu için renk kodunu gösteren bir program kullanabilirsiniz. Örneğin photoshop, boya veya bazı çevrimiçi araçlar. Buna göre, örneğin, tüm web sayfası için genel bir arka plan yazacağım.
gövde (arka plan rengi: # D4E6B3;)
Bu kodun baş bölümüne eklenmesi gerekiyor. Dosyaların aynı klasörde olması önemlidir.
Arka plan olarak resim
Resim olarak küçük bir html dil simgesi kullanacağım:
Bir tanımlayıcı ile boş bir blok oluşturalım:
< div id = "bg" > < / div > |
Açık boyutlar ve arka plan verelim:
#bg (genişlik: 400 piksel; yükseklik: 250 piksel; arka plan resmi: url (html.png);)
#bg ( genişlik: 400px; yükseklik: 250px; arkaplan - resim: url (html. png); |
Bu koddan, yeni bir özellik kullandığımı görebilirsiniz - background-image. Sadece bir html elemanı için arka plan olarak bir resim eklemek için tasarlanmıştır. Ne olduğunu görelim:
Bir resim ayarlamak için, iki nokta üst üste işaretinden sonra url anahtar sözcüğünü yazmalı ve ardından parantez içinde dosya yolunu belirtmelisiniz. Bu durumda yol, görüntünün html belgesiyle aynı klasörde olduğu gerçeğine göre belirlenir. Ayrıca görüntü formatını da belirtmeniz gerekir.
Bunu yaptıysanız ve arka plan hala blokta görünmüyorsa, yol ve uzantı doğru belirtilmişse, resmin adını doğru yazıp yazmadığınızı tekrar kontrol edin. Tarayıcı resmi bulamadığı için arka planın görüntülenmemesinin en yaygın nedenleri bunlardır.
Ama bir özelliği fark ettiniz mi? Tarayıcı görüntüyü blok boyunca aldı ve yeniden üretti. Yani, bildiğiniz gibi, bu arka plan görüntülerinin varsayılan davranışıdır - bloğa sığana kadar dikey ve yatay olarak tekrarlanırlar. Bu davranışı kolayca kontrol edebilirsiniz. Bunu yapmak için, 4 ana değeri olan arka plan tekrar özelliğini kullanın:
Yinele - varsayılan değer, görüntü her iki tarafta da yinelenir;
Yinele-x - yalnızca ois x için yineler;
Yinele-y - yalnızca y ekseni boyunca yinelenir;
Tekrar yok - hiç tekrar etmez;
Her bir değeri yazabilir ve ne olacağını görebilirsiniz. Bunu şöyle yazacağım:
arka plan tekrarı: tekrar-x;
arkaplan - tekrarla: tekrar - x; |
Şimdi sadece yatay olarak tekrarlayın. Tekrar yoksa sadece bir resim olur.
Harika, bunu şimdiden bitirebilirsiniz, çünkü bunlar arka planla çalışmak için temel olasılıklardır, ancak size üzerinde daha fazla kontrol sahibi olmanızı sağlayacak 2 özellik daha göstereceğim.
Yinelemeyle, düzen tasarımcıları küçük bir görüntü kullanarak arka plan dokuları ve gradyanları elde etmek için kullanılır. 30 piksele 10 piksel veya daha az olabilir. Belki biraz daha fazla. Görüntü, bir tarafta veya her iki tarafta da tekrarlandığında, hiçbir geçiş görünmeyecek ve sonuç olarak tek bir katı arka plan elde edilecek şekildeydi. Bu arada, web sitenizde arka plan olarak kesintisiz bir doku kullanmak istiyorsanız, bu yaklaşım şimdi kullanmaya değer. Bugün gradyan zaten css3 yöntemleri kullanılarak uygulanabiliyor, bundan kesinlikle bahsedeceğiz.
Arka plan konumu
Varsayılan olarak, bir arka plan görüntüsü tekrarlanacak şekilde ayarlanmadıysa, bloğunun sol üst köşesinde olacaktır. Ancak konum, background-position özelliği kullanılarak kolayca değiştirilebilir.
Bunu farklı şekillerde sorabilirsiniz. Seçeneklerden biri, resmin yerleştirilmesi gereken tarafları basitçe belirtmektir:
arka plan konumu: sağ üst;
arkaplan - konum: sağ üst; |
Yani dikey olarak her şey aynı kaldı: arka plan görüntüsü üstte yer alıyor, ancak yatay olarak tarafı sağa, yani sağa değiştirdik. Konumu belirlemenin başka bir yolu da yüzde cinsindendir. Bu durumda, geri sayım her durumda sol üst köşeden başlar. % 100 - tüm blok. Böylece resmi tam olarak merkeze yerleştirmek için şöyle yazıyoruz:
arka plan konumu:% 50% 50;
arkaplan - konum:% 50% 50; |
Konumlandırmayla ilgili önemli bir şeyi hatırlayın - ilk parametre her zaman yatay konumdur ve ikincisi dikey konumdur. Dolayısıyla,% 80% 20'lik bir değer görürseniz, hemen arka plan görüntüsünün güçlü bir şekilde sağa kaydırılacağı, ancak çok da aşağı inmeyeceği sonucuna varabilirsiniz.
Son olarak, konumu piksel cinsinden yazabilirsiniz. Her şey aynıdır, ancak% yerine piksel olacaktır. Bazı durumlarda bu konumlandırma da gerekli olabilir.
Kısaltılmış gösterim
Her şey bizim yaptığımız şekilde ayarlanmışsa, kodun oldukça külfetli hale geleceğini kabul edin. Resme giden yolun, tekrarın ve pozisyonun ayarlanması gerektiği ortaya çıktı. Elbette, tekrar ve konum her zaman gerekli değildir, ancak her durumda, steno özelliğini kullanmak daha doğrudur. Şöyle görünüyor:
arkaplan: # 333 url (bg.jpg) tekrar yok% 50% 50;
arka fon: # 333 url (bg.jpg) yineleme yok% 50% 50; |
Yani, ilk adım, gerekirse genel düz arka plan rengini kaydetmektir. Sonra görüntü, tekrar ve pozisyona giden yol. Bazı parametrelere gerek yoksa, onu atlarız. Kabul ediyorum, bu çok daha hızlı ve daha rahat ve ayrıca kodumuzu önemli ölçüde azaltıyoruz. Genel olarak, yalnızca bir renk veya resim belirtmeniz gerekse bile her zaman kısaltmalar yazmanızı tavsiye ederim.
Arka plan resminin boyutunu kontrol etme
Şu anki resmimiz bir sonraki numara için pek uygun değil, bu yüzden başka bir tane alacağım. Boyut olarak, bir blok gibi veya ondan daha büyük olsun. Öyleyse, bir görevle karşı karşıya olduğunuzu hayal edin: bloğunu tamamen doldurmaması için bir arka plan görüntüsü yapmak. Ve resim, örneğin, blok boyutundan bile daha büyük.
Bu durumda ne yapabilirsiniz? Tabii ki, en basit ve en mantıklı seçenek basitçe resmi küçültmek olacaktır, ancak bunu yapmak her zaman mümkün değildir. Diyelim ki sunucuda yatıyor ve şu anda onu azaltmak için zaman veya fırsat yok. Sorun, nispeten yeni olarak adlandırılabilen ve arka plan görüntüsünün veya aslında herhangi bir arka planın boyutunu değiştirmenize olanak tanıyan arka plan boyutu özelliği kullanılarak çözülebilir.
Resmim artık bloktaki tüm alanı kaplıyor, ancak ona bir arka plan boyutu vereceğim:
arka plan boyutu:% 80% 50;
arkaplan - boyut:% 80% 50; |
Yine, ilk parametre yatay boyut, ikincisi - dikey boyuttur. Her şeyin doğru uygulandığını görebiliyoruz - fotoğraf bloğun genişliğinin% 80'i genişliğinde ve yarısı yüksekliğinde oldu. Burada sadece bir açıklama yapmanız gerekiyor - boyutu yüzde olarak ayarlayarak resmin oranlarını etkileyebilirsiniz. Bu yüzden orantısız olmamaya dikkat edin.
Tahmin edebileceğiniz gibi, arka plan boyutu piksel cinsinden de belirtilebilir. Ayrıca kullanılabilecek iki anlamlı anahtar kelime vardır:
Kapak - resim, en az bir tarafı bloğu tamamen dolduracak şekilde ölçeklenecektir.
Kapsama - resmi maksimum boyutunda bloğa tam olarak sığacak şekilde ölçeklendirir.
Bu değerlerin avantajı, resmin en-boy oranını değiştirmemesi ve aynı kalmasıdır.
Ayrıca, görüntüyü uzatmanın kalitesinde bir bozulmaya yol açabileceğini anlamalısınız. Yerleşim tasarımcılarının hayatından ve gerçek uygulamalarından bir örnek verebilirim. Herkes, masaüstü bilgisayarları kodlarken siteyi ana monitör genişliğine uyarlamanız gerektiğini bilir ve anlar: 1280, 1366, 1920. Örneğin 1280x200 boyutunda bir arka plan resmi çekerseniz ve bunu arka plan boyutuna ayarlamazsanız, genişliğe sahip ekranlar daha büyük olur boş bir alan görünecek, resim genişliği tamamen doldurmayacaktır.
Vakaların% 99'unda bu, web geliştiricisine uygun değildir, bu nedenle arka plan boyutunu ayarlar, böylece resim her zaman pencerenin maksimum genişliğine kadar uzar. Bu, kullanmak için iyi bir hile, ancak şimdi 1920 piksel ekran genişliğine sahip kullanıcıların, optimal kalitede bir resim görmesi sorunuyla karşılaşıyorsunuz.
Maksimum genişliğe kadar uzayacağını hatırlatmama izin verin. Buna göre kalite otomatik olarak bozulacaktır. Buradaki tek doğru çözüm, başlangıçta 1920 piksel genişliğinde daha büyük bir resim kullanmak olacaktır. Daha sonra, en geniş ekranlarda doğal boyutunda olacak ve diğerlerinde basitçe yavaşça kırpılacak, ancak aynı zamanda arka plan görüntüsünün doğru seçilmesiyle bu, sitenin görünümünü etkilemeyecektir.
Genel olarak bu, gerçek düzenleri oluştururken bu makalede edindiğiniz bilgileri nasıl kullanacağınıza dair sadece bir örnektir.
CSS ile yarı şeffaf arka plan
Css kullanılarak uygulanabilecek başka bir numara da yarı saydam bir arka plandır. Yani, bu arka plan sayesinde arkasında ne olduğunu görmek mümkün olacak.
Örnek olarak, daha önce örneklerde kullandığımız arka plan resmi olarak sayfanın tamamını ayarlayacağım. Üzerinde tüm deneylerimizi yürüttüğümüz bg tanımlayıcısına sahip blok için, rgba renk formatını kullanarak arka planı ayarlayacağız.
Daha önce de söylediğim gibi, css'de renkleri ayarlamak için birçok format vardır. Bunlardan biri, grafik editörlerinde çalışanlar için oldukça iyi bilinen bir format olan rgb'dir. Şöyle yazılır: rgb (17, 255, 34);
Parantez içindeki ilk değer kırmızı, ardından yeşil ve sonra mavinin doygunluğudur. Değer 0 ile 255 arasında sayısal olabilir. Buna göre, rgba formatı farklı değildir, yalnızca bir parametre daha eklenir - alfa kanalı. Değer, 0 ile 1 arasında olabilir; burada 0, tam şeffaflıktır.
kısa bilgi
CSS sürümleri
Değerler
url Değer, url () yapısının içinde belirtilen grafik dosyasına giden yoldur. Bu durumda, dosyanın yolu tırnak içinde (çift veya tek) veya onlarsız yazılabilir. hiçbiri Öğenin arka plan görüntüsünü iptal eder. miras alır Üst öğenin değerini devralır.HTML5 CSS2.1 IE Cr Op Sa Fx
Nesne Modeli
document.getElementById ("elementID") .style.backgroundImage
Tarayıcılar
Internet Explorer 7.0 veya sonraki sürümleri, hasLayout özelliği ayarlanmış bir öğenin kenarlığının içine bir arka plan uygular. Öğenin hasLayout'u yoksa, background-image özelliği, özellikte belirtildiği gibi öğenin kenarlıklarına uyacaktır. Kenarlıklar düz değil de kesikli veya noktalı ise ekrandaki fark fark edilebilir.
Öğe kaydırmaya veya otomatik olarak ayarlanmışsa, Internet Explorer 8'de arka plan kaydırıldığında bir piksellik dikey gecikme olur.
Internet Explorer 7.0 veya üstü, devralma değerini desteklemez.
Arka plan bir tablo satırı için ayarlanmışsa (etiket
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
Bu örneğin Chrome tarayıcısındaki sonucu Şekil 2'de gösterilmektedir. 1. Tarayıcı Internet Explorer, Opera ve Firefox, satırın arka planını doğru bir şekilde görüntüler (Şekil 2).
Şekil: 1. Her hücre için arka planı tekrarlama
Şekil: 2. Hattın tamamı için arka plan
Sanırım mülkün kullanılmadığı tek bir site yok CSS arka planı... Görünüşe göre bu özellikten daha basit ne olabilir? Ama hayır, yetenekleri bir sayfanın arka planı olarak bir resmin veya rengin olağan amacından çok daha geniştir. Bir şeyler tanıdık gelecek, ancak bir şeyler kesinlikle birçokları için bir yenilik olacak. Her durumda, arka planın nasıl çalıştığını iyice bilmek faydalı olacaktır.
CSS3, mülke saydamlık ve arka plan olarak birden fazla görüntü atama gibi birçok yeni şey getirdi, ancak bunun hakkında aşağıda konuşacağız ve önce mülkün temellerine bakacağız. arka fon.
arka plan rengi
Eminim birçok kez arka plan rengi ataması yapmışsınızdır. Bu, çeşitli gösterim türleri kullanılarak yapılabilir: normal (renk adı kullanılır), onaltılık veya RGB gösterimi. Her tür eşittir, hangisini en çok sevdiğinizi kullanın. En kısa versiyonu kullanmaya çalışıyorum ve algı açısından daha basit ve stil dosyası biraz daha küçük boyutta.
P (arka plan rengi: kırmızı;) p (arka plan rengi: # f00;) p (arka plan rengi: # ff0000;) p (arka plan rengi: rgb (255, 0, 0;))
CSS3 şeffaflık desteğine sahiptir, bu nedenle onu rengimize de ekleyebilirsiniz, örneğin:
P (arka plan rengi: rgba (255, 0, 0, 0.5);)
Son rakam% 50 şeffaflığa ayarlandı. Saydamlık değerini 0 (tamamen şeffaf arka plan) ile 1 (tamamen opak) arasında ayarlayabilirsiniz.
arka plan görüntüsü
Bu özellik ayrıca çok sık kullanılır, arka plana bir görüntü atamanıza izin verir. CSS3, arka plana birden çok görüntü atama yeteneği ekler, her biri bir tür katman oluşturur, böylece sonraki her biri bir öncekinin üzerine bindirilir. Bu neden yararlı olabilir? Her şey oldukça basit - diyelim ki sitenin her köşesindeki küçük şeyleri sabitlemeniz gerekiyor. Az ya da çok akışkan bir düzen sağlamak, tek bir görüntü kullanmak bir seçenek değildir. Bu nedenle 4 "katman" oluşturuyoruz, her resmi kendi köşesine taşıyoruz ve işte bu, sorun çözüldü
Gövde (arka plan resmi: url ("resim1"), url ("resim2"), url ("resim3"))
Arka plana bir resim atamanız gerekiyorsa, kodda sadece ilkini bırakıyoruz, bunun anlaşılabilir olduğunu düşünüyorum.
Herhangi bir resmi arka plan olarak kullanırken akılda tutulması gereken iki kural vardır:
- kullanıcının herhangi bir nedenle bir resmi görüntüleyememesi durumunda karşıt bir arka plan rengi ayarlayın. Eski görüntülerin görüntülenmesini kapatabilir, trafik tasarrufu sağlar.
- önemli bilgileri iletmek için bir arka plan resmi kullanmayın. Yukarıda belirtilen sebepten dolayı kullanıcı bunu göremeyebilir.
Birden fazla arka plan görüntüsü desteği yeterince geniştir. Tüm tarayıcılar, IE8 bile bu özelliği destekler.
Merhaba blog sitesinin sevgili okuyucuları. Bugün, Html'deki herhangi bir öğe için arka planı ayarlamanıza izin veren beş CSS kuralına bakacağız - arka plan konumu (resim, tekrar, renk, ek). Pekala, Arka Plan bileşik kuralından da bahsetmeyi unutmayalım.
Bunda zor bir şey yok, ancak hazır bir şablon hakkında bilmeniz gereken belirli incelikler ve nüanslar var (bunun herhangi bir tasarımın tüm ayrıntılarını açmanıza yardımcı olacağını unutmayın).
Bu makalenin bir serinin parçası olduğunu bir kez daha hatırlatmama izin verin ve önce stil işaretlemeyi öğrenmeye başlamak, yani CSS'nin ne olduğu ve ne ile yenildiği hakkında bir makale ile başlamak ve sonra referansta verilen sıraya göre takip etmek en iyisi olacaktır. Yine de, her durumda, size kalmış, ancak şimdi arka planı ayarlamak hakkında konuşalım.
Renk, arka plan rengi ve arka plan görüntüsü
Önce Html öğelerinin renginin nasıl ayarlandığını görelim Css renk kuralları... Aslında burada her şey basit. Sözdizimi tamamen normaldir ve rengi, köprü metni işaretleme dilinde nasıl yapıldığına göre ayarlayabilirsiniz. Hatırladığınız gibi, hash işaretinden sonra (hash - "# fe35a3") veya üç basamak kullanarak, eğer ilki ikincinin değeriyle eşleşiyorsa, üçüncüsü dördüncü ile, beşinci ise altıncı ile (renk kodu "# aa33ff") "a3f" olarak kısaltılabilir).
Ayrıca, Html ve Css kodundaki renkler kelimeler olarak temsil edilebilir (örneğin, "kırmızı"), ancak genellikle onaltılık kod kullanılır:
Renk: # 303
Örnek olarak, bu küçük paragrafı yukarıdakiyle aynı renge boyadım (# 303). Şimdi kullandığım WordPress temasının CSS dosyasında # 555 olarak ayarlanan diğer tüm paragrafların renginden (daha koyu) biraz farklı. Ancak rengi renk aracılığıyla ayarlamak oldukça basittir, ancak arka planla biraz daha karmaşık olacaktır.
Yani, css'de arka plan için İstenirse tek bir takımda birleştirilebilecek beş kural vardır. Bunları görmek için, mevcut W3C spesifikasyonunun sayfasına gidebilir ve Arka Plan kelimesi ile bir şey arayabilirsiniz:
- arka plan rengi - bu kural, herhangi bir Html öğesi için arka plan rengini ayarlar. İçinde gölgenin kodunu veya adını kullanabilirsiniz, yani. her şey tam olarak rengi kullanırken olduğu gibidir.
arka plan görüntüsü - bununla birlikte bir resmi arka plan olarak kullanabilirsiniz (ancak bunu mutlaka okuyun, çünkü ağır resimler sayfanın yüklenmesini yavaşlatacaktır), yol url () işlevinde belirtilecektir.
Spesifikasyona bakarsanız, bunu göreceksiniz varsayılan arka plan rengi herhangi bir öğe şeffaf olacaktır (kuralın varsayılan değeri "background-color: transparent" şeklindedir). Bununla birlikte, öğelerde varsayılan olarak şeffaf olmayacaktır, çünkü bunlar sistem öğeleridir ve her şeyi farklı ve hiper metin biçimlendirme dilinin olağan etiketlerinden farklıdırlar.
Arka plan rengi standart olarak ayarlanmıştır (altı veya üç onaltılık rakam veya bir kelime):
Arka plan rengi: #FEFCDE
Örneğin, bu paragrafın arka planı, hemen yukarıda verilen renk kodu ile tam olarak arka plan rengiyle belirlenir.
Diğer dört CSS kuralı, yalnızca herhangi bir Html öğesi için ayarlanabilen ve istenirse tam olarak konumlandırılabilen arka plan resmini ilgilendirir. Hangi grafik dosyasının kullanılacağı, kullanılarak ayarlanabilir arka plan görüntüsü.
Stil biçimlendirme dili spesifikasyonuna bakarsanız, varsayılan arka plan görüntüsünün "yok" olduğunu görürsünüz (yani arka plan görüntüsü kullanılmaz). Hala ihtiyacınız varsa, url () işlevinde ona giden yolu belirtmeniz gerekecektir:
Arka plan resmi: url (https: //site/image/comment_top_focus.gif);
Örneğin, bu paragraf için yolu hemen yukarıda açıklanan arka plana sahip bir grafik dosyası kullandım. Bu paragraf için ayrılan alanın tamamının, orijinalde aşağıdaki gibi görünen yinelenen bir resimle kaplandığını görebilirsiniz:
Şunlar. Grafik dosyasına giden yolla yalnızca bir arka plan görüntüsü kuralı kullanıldığında, bu görüntü, bu belirli Html öğesi için web sayfasında ayrılan tüm alanı kaplayana kadar hem dikey hem de yatay olarak çarpılacaktır (bizim örnek, bir paragraftı). Neden olur?
Arka plan tekrar - arka plan resmini tekrarlayın
Evet, CSS kuralı için herhangi bir değer yazmadık çünkü arkaplan tekrarbu, bunun için varsayılan değerin kullanılacağı anlamına gelir. Spesifikasyona bakıldığında, bu değerin "tekrar" a karşılık geldiğini görürüz (görüntüyü tüm eksenler boyunca tekrarlayarak). Cevap kendiliğinden geldi.
Bu nedenle, arka plan tekrarı ile yapabiliriz arka plan resminin tekrarlarını yönet... Bu kuralın yalnızca dört değeri olabilir:
Arka plan konumu - arka planı konumlandırma
Şimdi soru ortaya çıkıyor, arka plan görüntüsünü, elemanın boyutunu sınırlayan alanın sol üst köşesinden uzaklaştırmak mümkün mü. Elbette yapabilirsin ve bu amaçla ayrı bir kural var arka plan konumu:
CSS spesifikasyonuna bakıldığında, varsayılan arka plan resminin neden tam olarak Html öğesi alanının sol üst kenarına yerleştirildiği anlaşılır. Çünkü "% 0% 0%" değeri, arka plan konum kuralı için varsayılan değerdir.
Pekala, bu kural bir öğe için açıkça belirtilmediğinde (bizim durumumuzda olduğu gibi), o zaman tarayıcı varsayılan olarak belirtimde kabul edilen değerini seçer (CSS'deki koordinat eksenlerinin alanın sol üst kenarından rapor edildiğini unutmayın. öğesi).
Ayrıca spesifikasyondan, hem göreceli (yüzde) hem de mutlak değerlerin (örneğin) arka plan konumunu kullanarak arka plan görüntüsünü konumlandırmak için kullanılabileceğini de görebilirsiniz. Ayrıca, belirli sayısal değerlere karşılık gelen sözcükler de kullanabilirsiniz. Ama önce ilk şeyler.
Arka plan resminin konumunu ayarlarken mutlak birimler kullanarak arka plan konumu, nihai konumunu belirlemek için aşağıdaki ilkeye sahiptir:
Şunlar. tarayıcı, nesnenin konumlandırıldığı alanın başlangıcından bu görüntünün başlangıcına kadar X ve Y eksenleri boyunca belirtilen ofsetleri hesaplayacaktır. Örneğin, bu paragrafta, aşağıdaki CSS kurallarını kullanarak arka plan görüntüsünü arka plan konumu aracılığıyla konumlandırdım:
Arka plan resmi: url (https: //site/image/logo.png); arka plan tekrarı: yineleme yok; arka plan konumu: 400px 25px;
Lütfen bu durumda, bu paragraflar için ayrılan alanın merkezine değil, görünüm penceresinin merkezine hizalanacağını unutmayın. Gerçekte, arka plan görüntüsünün böyle bir düzenlemesinin uygulama bulmasının pek olası olmadığı açıktır.
Bununla birlikte, Gövde veya Html gibi öğeler için sabit bir arka plan konumu ayarlarsanız (yani, web sayfasının tamamını kaplayan etiketlerde), bu resim her zaman görünümde görünür olacaktır ve bu tam olarak arka plan eki CSS özelliğinin kullanımıdır. modern blok düzeni.
Biraz daha var mı prefabrik kural Arka plan, yukarıda açıklanan beş kuralı tek bir şişede birleştirmenize olanak tanır. Ayrıca, birleştirilmiş sürümdeki beşinin tümü için değerler herhangi bir sırada ve herhangi bir miktarda kullanılabilir (bunlar benzersizdir ve tarayıcı bunları birbiriyle karıştırmaz). Açıkça belirtmediğiniz herhangi bir şey, tarayıcı varsayılan değere eşit kabul edecektir.
Png) tekrar etmeme% 50;
Örnekte gösterilen montaj kuralı, bu paragrafa netlik sağlamak için uygulanmıştır. Güzel olmadığı ortaya çıktı, ama asıl mesele bu değil. Bu paragraf için, paragrafın ortasına hizalanmış bir LiveInternet logosu görüntüsünün yanı sıra garip bir sarı arka plan dolgusu kullanılır. Çünkü arka plan ekleme kuralı için herhangi bir değer belirtilmez, ardından kaydırma değeri (varsayılan) kullanılır.
Bazı öğeler için yalnızca renkli bir dolgu ayarlamak istiyorsanız ve arka plan resmiyle uğraşmak istemiyorsanız, bunun yerine iyi olabilirsiniz:
Arka plan rengi: #FEFCDE
yazmak:
Arka plan: #FEFCDE
Birleştirilmiş kuralın geri kalan tüm değerleri varsayılan olarak alınacaktır ve ihtiyacınız olan şey budur.
Sana iyi şanslar! Yakında blog sitesi sayfalarında görüşmek üzere
İlgini çekebilir
Liste stili (tür, görüntü, konum) - Html kodundaki listelerin görünümünü özelleştirmek için Css kuralları Nth-child sözde sınıfını kullanarak bir sitedeki tablo, liste ve diğer Html öğelerinin satırlarının alternatif arka plan rengini ayarlama 
Konum (mutlak, göreceli ve sabit) - HTML öğelerini CSS'de konumlandırma yolları (sol, sağ, üst ve alt kurallar) 
CSS'de kaydırın ve temizleyin - blok düzeni araçları 
Fare imlecini değiştirmek için Z-endeksi ve CSS İmleç kuralı ile konumlandırma 
Dolgu, Kenar Boşluğu ve Kenarlık - CSS'de iç ve dış kenar boşluklarının yanı sıra tüm kenarlar için (üst, alt, sol, sağ) kenar boşlukları belirleriz 
CSS'de görüntüleme (blok, yok, satır içi) - web sayfasındaki Html öğelerinin görüntülenme türünü ayarlayın 
Önemli, Seçici Birleştirme ve Gruplama, Özel ve Yazar Stilleriyle Css Öncelikleri ve Artırma 
CSS - nedir, basamaklı stil sayfaları Stil ve Bağlantı kullanılarak html koduna nasıl bağlanır? 
Etiket, sınıf (sınıf), Kimlik ve genel seçiciler ile modern CSS'de öznitelik seçiciler