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). Peki, Arka Plan bileşik kuralından da bahsetmeyi unutmayalım.
Bunda zor bir şey yok, ancak bilmeniz gereken ve zaten bilmeniz gereken bazı incelikler ve nüanslar var. hazır şablon(herhangi bir tasarımın tüm ayrıntılarını açmaya 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şaretlemesini öğrenmeye başlamanın en iyisi olacağını, yani CSS'nin ne olduğu ve neyle yenildiği hakkında bir makale ile, sonra verilen sırayı takip edin. referansta. Her durumda, bu size kalmış olsa da, şimdi arka planı ayarlamaktan bahsedelim.
Renk, arka plan rengi ve arka plan görüntüsü
Önce rengin nasıl ayarlandığını görelim HTML öğeleri kullanarak Css renk kuralları... Aslında, burada her şey basit. Sözdizimi tamamen normaldir ve rengi, köprü metni biçimlendirme dilinde nasıl yapıldığına göre ayarlayabilirsiniz. Hatırladığınız gibi, karma işaretinden sonra yerleştirilir (karma - "# fe35a3") veya ilki ikincinin değeriyle eşleşirse üç basamaklı, üçüncüsü dördüncü, kuyu ve beşinci, altıncı ile ("# aa33ff" renk kodu "a3f" olarak kısaltılabilir).
Html'de aynı renkler ve Css kodu kelimeler biçiminde gösterilebilir (örneğin, "kırmızı"), ancak en çok 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 üzerinden ayarlamak oldukça basittir, ancak arka plan ile biraz daha karmaşık olacaktır.
Yani, css arka planı içinİstenirse tek bir takımda birleştirilebilecek beş kural vardır. Bunları görmek için mevcut W3C spesifikasyon sayfasına gidebilir ve Arka Plan kelimesiyle 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 renk kullanırken olduğu gibi.
arka plan resmi - onunla bir resmi arka plan olarak kullanabilirsiniz (ancak bunun hakkında okuduğunuzdan emin olun, çünkü ağır resimler sayfanın yüklenmesini yavaşlatacaktır), yolu url () işlevinde belirtilecektir.
Spesifikasyona bakarsan görürsün varsayılan arka plan rengi herhangi bir öğe şeffaf olacaktır (kuralın varsayılan değeri "arka plan rengi: şeffaf"tır). Ancak, öğelerde varsayılan olarak şeffaf olmayacaktır, çünkü bu sistem elemanları ve hiper metin biçimlendirme dilinin olağan etiketlerinden farklı ve farklı her şeye sahiptirler.
Arka plan rengindeki renk standart olarak ayarlanır (onaltılık bir kodun altı veya üç hanesi veya bir kelime):
Arka plan rengi: #FEFCDE
Örneğin, bu paragrafın arka planı, tam olarak yukarıda verilen renk koduyla arka plan rengi aracılığıyla ayarlanır.
Diğer dört CSS kuralının tümü, yalnızca herhangi bir Html öğesi için ayarlanabilen ve istenirse tam olarak konumlandırılabilen arka plan görüntüsü için geçerli olacaktır. Hangi grafik dosyasının kullanılacağı kullanılarak ayarlanabilir arka plan görüntüsü.
Stil biçimlendirme dili belirtimine bakarsanız, varsayılan arka plan görüntüsünün "hiçbiri" olduğunu görürsünüz (yani, arka plan görüntüsü kullanılmaz). Peki, hala ihtiyacınız varsa, o zaman url () işlevinde ona giden yolu belirtmeniz gerekir:
Arka plan resmi: url (https: //site/image/comment_top_focus.gif);
Örneğin, bu paragraf için, yolu hemen yukarıda açıklanan arka planı olan bir grafik dosyası kullandım. Bu paragraf için ayrılan alanın tamamının, orijinalde şöyle görünen, tekrar eden bir görüntüyle kaplandığını görebilirsiniz:
Onlar. grafik dosyasının yolunu gösteren tek bir arka plan resmi kuralı kullanıldığında, bu resim, web sayfasında bu belirli Html öğesi için ayrılan tüm alanı kaplayana kadar hem dikey hem de yatay olarak çarpılacaktır (örneğimizde, paragraf). Neden oluyor?
Background-repeat - arka plan görüntüsünü tekrarla
Evet, çünkü CSS kuralı için herhangi bir değer yazmadık. arka plan-tekrar, bunun için varsayılan değerin kullanılacağı anlamına gelir. Spesifikasyona baktığımızda, bu değerin "repeat" (görüntüyü tüm eksenler boyunca tekrarlama) değerine karşılık geldiğini görüyoruz. 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ü, öğenin boyutunu sınırlayan alanın sol üst köşesinden uzaklaştırmak mümkün mü? Tabii ki yapabilirsiniz ve bu amaç için ayrı bir kural var arka plan konumu:
CSS spesifikasyonuna bakıldığında, varsayılan arka plan görüntüsünün neden tam olarak Html öğesinin alanının sol üst kenarına yerleştirildiği anlaşılır. Çünkü "0% 0%" değeri arka plan konumu kuralı için varsayılandır.
Pekala, bu kural bir eleman için açıkça ayarlanmadığında (bizim durumumuzda olduğu gibi), o zaman tarayıcı varsayılan olarak belirtimde kabul edilen değerini seçer (CSS'deki koordinat eksenlerinin sadece sol üst kenardan bildirildiğini unutmayın). alan öğesi).
Ayrıca, arka plan görüntüsünü arka plan konumunu kullanarak konumlandırmak için hem göreli (yüzde) hem de mutlak değerlerin (örneğin) kullanılabileceği spesifikasyondan görülebilir. Pekala, belirli sayısal değerlere karşılık gelecek sözcükleri de kullanabilirsiniz. Ama önce ilk şeyler.
Arka plan görüntüsünün konumunu ayarlarken mutlak birimleri kullanarak arka plan konumunda, son konumunu belirlemek için aşağıdaki ilke gerçekleşir:
Onlar. tarayıcı, nesnenin konumlandırıldığı alanın orijininden bu görüntünün orijinine 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 açısından konumlandırdım:
Arkaplan resmi: url (https: //site/image/logo.png); arka plan tekrarı: tekrar yok; arka plan konumu: 400 piksel 25 piksel;
Lütfen bu durumda, bu paragraflar için ayrılan alanın merkezine değil, görünüm alanının merkezine hizalanacağını unutmayın. Gerçekte, arka plan görüntüsünün böyle bir düzenlemesinin uygulama bulması pek mümkün olmadığı açıktır.
Ancak, Body veya Html gibi öğeler için sabit bir arka plan konumu ayarlarsanız (yani, tüm web sayfasını kapsayan etiketlerde), bu resim her zaman görünüm alanında görünür olacaktır ve bu tam olarak arka plan eki CSS özelliğidir. modern blok düzeninde bulur.
biraz daha var mı prefabrik kural Arkaplan, yukarıda açıklanan beş kuralın tümünü tek bir şişede birleştirmenize olanak tanır. Ayrıca, prefabrik versiyondaki beşin tümü için değerler herhangi bir sırayla ve herhangi bir miktarda kullanılabilir (bunlar benzersizdir ve tarayıcı bunları birbiriyle karıştırmaz). Açıkça belirtmediğiniz her şeyi tarayıcı varsayılan değere eşit olarak değerlendirecektir.
Png) tekrarsız %50;
Örnekte gösterilen montaj kuralı, açıklık için bu paragrafa uygulanır. Güzel olmadığı ortaya çıktı, ama asıl şey bu değil. Bu paragraf için, paragrafın ortasına hizalanmış LiveInternet logosunun yanı sıra garip bir sarı arka plan dolgusu kullanılır. Çünkü arka plan ekleme kuralı için herhangi bir değer belirtilmezse, varsayılan kaydırma değeri kullanılır.
Bazı öğeler için yalnızca renkli bir dolgu ayarlamak istiyorsanız ve arka plan görüntüsüyle uğraşmıyorsanız, bunun yerine şunları yapabilirsiniz:
Arka plan rengi: #FEFCDE
yazı yazmak:
Arkaplan: #FEFCDE
Birleştirilmiş kuralın diğer tüm değerleri için varsayılan olarak alınacaktır ve ihtiyacınız olan şey budur.
Sana iyi şanslar! Yakında blog sitesinin sayfalarında görüşürüz
ilginizi ç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 sitedeki tablo, liste ve diğer Html öğelerinin satırlarının arka plan renginin değişimi nasıl ayarlanır? 
Konum (mutlak, göreceli ve sabit) - HTML öğelerini CSS'de konumlandırmanın yolları (kurallar sol, sağ, üst ve alt) 
CSS'de yüzdür ve temizle - yerleşim araçlarını engelle 
Fare imlecini değiştirmek için Z-endeksi ve CSS İmleç kuralı ile konumlandırma 
Dolgu, Kenar Boşluğu ve Kenarlık - iç ve dış dolgu, ayrıca tüm taraflar için kenarlıklar (üst, alt, sol, sağ) 
CSS'de görüntüle (blok, yok, satır içi) - web sayfasında Html öğelerinin görüntülenme türünü ayarlayın 
Önemli, Seçici Kombinasyonu ve Gruplama, Özel ve Yazar Stilleri ile CSS Öncelikleri ve Yükseltme 
CSS - nedir, basamaklı stil sayfalarının nasıl bağlantılı olduğu HTML Kodu Stil ve Bağlantıyı kullanma 
Modern CSS'de etiket, sınıf, kimlik ve genel seçicilerin yanı sıra özellik seçicileri
Yazardan: Herkese hoş geldiniz. Arka plan renkleri ve görseller, herhangi bir öğenin daha çekici bir şekilde tasarlanmasına izin verdikleri için web tasarımında büyük rol oynar. Bugün html'de nasıl arka plan yapılacağına bakacağız.
Arka planı ayarlarken html ile geçinmek mümkün mü?
Hemen söylemeliyim ki hayır. Genellikle html, web sayfalarına stil vermek için tasarlanmamıştır. Sadece çok uygunsuz. Örneğin, arka plan rengini ayarlayabileceğiniz bir bgcolor niteliği vardır, ancak bu çok elverişsizdir.
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ı analiz edeceğiz.
Arka planı css ile nasıl ayarlarım?
Bu nedenle, öncelikle, arka planı hangi öğeye ayarlamanız gerektiğine karar vermelisiniz. Yani kuralı yazacağımız seçiciyi bulmamız gerekiyor. Örneğin, arka planın tüm sayfa için bir bütün olarak ayarlanması gerekiyorsa, bunu gövde seçiciden, tüm bloklar için - div seçiciden 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 (degrade veya görüntü değil, yalnızca düz renk), arka plan rengi özelliğini kullanın. Ondan sonra, iki nokta üst üste koymanız ve rengin kendisini yazmanız gerekir. Bu farklı şekillerde yapılabilir. Örneğin, anahtar kelimeler, hex kodu, rgb, rgba, hsl formatlarını kullanmak. Herhangi bir yöntem yapacaktır.
En yaygın kullanılan yöntem onaltılık koddur. Renk eşleştirme için renk kodunun göründüğü bir program kullanabilirsiniz. Örneğin photoshop, paint 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 head bölümüne eklenmesi gerekiyor. Dosyaların aynı klasörde olması önemlidir.
arka plan olarak resim
Resim olarak küçük bir html dil ikonu kullanacağım:
Bir tanımlayıcı ile boş bir blok oluşturalım:
< div id = "bg" > < / div > |
Açık bir boyut ve arka plan verelim:
#bg (genişlik: 400 piksel; yükseklik: 250 piksel; arka plan resmi: url (html.png);)
#bg ( genişlik: 400 piksel; yükseklik: 250 piksel; arka plan - resim: url (html. png); |
Bu koddan, yeni bir özellik kullandığımı görebilirsiniz - arka plan görüntüsü. Yalnızca bir html öğesi için arka plan olarak bir görüntü eklemek için tasarlanmıştır. Ne olduğunu görelim:
Bir resim ayarlamak için iki nokta üst üste işaretinden sonra yazmalısınız. anahtar kelime url ve ardından parantez içinde dosyanın yolunu belirtin. 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ü biçimini de belirtmeniz gerekir.
Bunu yaptıysanız ve arka plan hala blokta görünmüyorsa, resmin adını doğru yazıp yazmadığınızı, yol ve uzantının doğru belirtilmiş olup olmadığını tekrar kontrol edin. Bunlar, tarayıcı resmi bulamadığı için arka planın basitçe görüntülenememesinin en yaygın nedenleridir.
Ama bir tuhaflık fark ettiniz mi? Tarayıcı, görüntüyü blok boyunca aldı ve yeniden üretti. 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ğere sahip arka plan-tekrar özelliğini kullanın:
Tekrar - varsayılan değer, görüntü her iki tarafta da tekrarlanır;
Tekrar-x - sadece ois x için tekrarlar;
Tekrar-y - sadece y ekseni boyunca tekrarlar;
Tekrar yok - hiç tekrarlamaz;
Her değeri yazabilir ve ne olduğunu görebilirsiniz. Bunu şöyle yazacağım:
arka plan-tekrar: tekrar-x;
arka plan - tekrar et: tekrar et - x; |
Şimdi sadece yatay olarak tekrarlayın. Tekrarsız, sadece bir resim olurdu.
Harika, bunu zaten bitirebilirsin, çünkü bunlar arka planla çalışmak için temel olanaklardır, ancak size, üzerinde daha fazla kontrol sahibi olmanızı sağlayan 2 özellik daha göstereceğim.
Mizanpaj tasarımcıları, tekrarlama ile arka plan dokuları ve gradyanları tek bir küçük görüntü kullanarak elde ederdi. 30 piksele 10 piksel veya daha az olabilirdi. Belki biraz daha fazla. Görüntü öyleydi ki, bir tarafta veya hatta her iki tarafta tekrarlandığında, hiçbir geçiş görünmüyordu, böylece sonuç olarak tek bir katı arka plan elde edildi. Bu arada, sitenizde arka plan olarak sorunsuz bir doku kullanmak istiyorsanız bu yaklaşımı kullanmaya değer. Bugün degrade css3 yöntemleri kullanılarak zaten uygulanabiliyor, bundan kesinlikle bahsedeceğiz.
Arka plan konumu
Varsayılan olarak, arka plan görüntüsü, tekrarlanacak şekilde ayarlanmazsa, bloğunun sol üst köşesinde olacaktır. Ancak, arka plan konumu özelliği kullanılarak konum kolayca değiştirilebilir.
Farklı şekillerde sorabilirsiniz. Seçeneklerden biri, resmin yerleştirilmesi gereken tarafları basitçe belirtmektir:
arka plan konumu: sağ üst;
arka plan - konum: sağ üst; |
Yani dikey olarak her şey aynı kaldı: arka plan görüntüsü üstte, ancak yatay olarak tarafı sağa, yani sağa değiştirdik. Pozisyonu ayarlamanın başka bir yolu da yüzdedir. 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;
arka plan - konum: %50 %50; |
Konumlandırmayla ilgili önemli bir şeyi unutmayın - ilk parametre her zaman yatay konumdur ve ikincisi dikey konumdur. Yani, %80 %20'lik bir değer görürseniz, hemen arka plan görüntüsünün sağa kaydırılacağı, ancak çok fazla düşmeyeceği sonucuna varabilirsiniz.
Son olarak, konumu piksel cinsinden yazabilirsiniz. Her şey aynı, ancak % yerine px olacak. Bazı durumlarda, bu konumlandırma da gerekli olabilir.
kısaltılmış gösterim
Her şey bizim yaptığımız gibi ayarlanmışsa, kodun oldukça hantal olduğunu kabul edin. Resme giden yolun, tekrarın ve konumun ayarlanması gerektiği ortaya çıktı. Elbette, tekrar ve konum her zaman gerekli değildir, ancak her durumda stenografi özellik gösterimini kullanmak daha doğrudur. Şuna benziyor:
arka plan: # 333 url (bg.jpg) tekrarsız %50 %50;
arka fon: # 333 url (bg.jpg) tekrarsız %50 %50; |
Yani ilk adım, gerekirse genel düz arka plan rengini kaydetmektir. Ardından görüntüye, tekrara ve konuma giden yol. Bazı parametrelere ihtiyaç yoksa, basitçe atlarız. Katılıyorum, bu çok daha hızlı ve daha uygun ve ayrıca kodumuzu önemli ölçüde azaltıyoruz. Genel olarak, sadece bir renk veya resim belirtmeniz gerekse bile, her zaman kısaltmalarla yazmanızı tavsiye ederim.
Arka plan görüntüsünün boyutunu kontrol etme
Mevcut imajımız bir sonraki numara için pek uygun değil, bu yüzden bir tane daha alacağım. Boyut olarak, bir blok gibi veya ondan daha büyük olmasına izin verin. Ö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 örneğin resim, blok boyutundan bile daha büyük.
Bu durumda ne yapabilirsiniz? Tabii ki, en basit ve en makul seçenek, resmi basitçe küçültmek olacaktır, ancak bunu yapmak her zaman mümkün değildir. Diyelim ki sunucuda ve içinde yatıyor şu an azaltmak için zaman veya fırsat yoktur. 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.
Yani, resmim artık bloktaki tüm alanı kaplıyor, ancak ona bir arka plan boyutu vereceğim:
arka plan boyutu: %80 %50;
arka plan - boyut: %80 %50; |
Yine, ilk parametre yatay boyut, ikincisi - dikey boyuttur. Her şeyin doğru uygulandığını görebiliyoruz - fotoğraf blok 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 kalmamaya 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çeklenir.
İçerir - resmin maksimum boyutunda bloğa tamamen sığması için ölçekler.
Bu değerlerin avantajı, resmin en boy oranını değiştirmemeleri ve aynı bırakmalarıdır.
Ayrıca, görüntüyü uzatmanın kalitesinde bozulmaya yol açabileceğini anlamalısınız. Mizanpaj tasarımcılarının hayatından ve gerçek uygulamalarından bir örnek verebilirim. Masaüstü bilgisayarlar için kod yazarken siteyi ana monitör genişliklerine uyarlamanız gerektiğini herkes bilir ve anlar: 1280, 1366, 1920. Örneğin, 1280 x 200 boyutunda bir arka plan resmi çekerseniz ve ayarlamazsanız arka plan boyutundaysa, genişliği olan ekranlar daha büyükse boş bir alan görünür, resim genişliği tam olarak doldurmaz.
Vakaların %99'unda bu, web geliştiricisine uymaz, bu nedenle arka plan boyutunu ayarlar: kapak, böylece resim her zaman pencerenin maksimum genişliğine kadar uzanır. Bu kullanmak için iyi bir numaradır, ancak şimdi 1920 piksel ekran genişliğine sahip kullanıcıların en düşük kalitede bir resim görebilmesi 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 daha büyük bir resim kullanmaktır - 1920 piksel genişliğinde. Daha sonra en geniş ekranlarda doğal boyutunda olacak ve diğerlerinde sadece yavaşça kesilecek, ancak aynı zamanda arka plan resminin doğru seçimi ile dış görünüş site etkilenmeyecektir.
Genel olarak bu, bu makalede edindiğiniz bilgileri gerçek düzenler oluştururken nasıl kullanacağınıza ilişkin sadece 1 örnektir.
css ile yarı şeffaf arka plan
İle uygulanabilecek başka bir numara css kullanarak- zemin şeffaf arka plan... Yani, bu arka plan sayesinde arkasında ne olduğunu görmek mümkün olacak.
Örnek olarak, daha önce örneklerde kullandığımız tüm sayfayı arka plan görüntüsü olarak ayarlayacağım. Tüm deneylerimizi gerçekleştirdiğimiz bg tanımlayıcılı blok için rgba renk formatını kullanarak arka planı ayarlayacağız.
Daha önce de söylediğim gibi, renkleri ayarlamak için css'de birçok format vardır. Bunlardan biri, rgb'de çalışanlar için oldukça iyi bilinen bir format olan rgb'dir. grafik editörleri... Şu şekilde yazılmıştır: rgb (17, 255, 34);
Parantez içindeki ilk değer kırmızının doygunluğu, sonra yeşil, sonra mavidir. 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'ye giden yol grafik dosyası url () yapısının içinde belirtilen . Bu durumda, dosyanın yolu tırnak içinde (çift veya tek) veya onlarsız yazılabilir. yok Öğenin arka plan görüntüsünü iptal eder. inherit Değeri üst öğeden devralır.HTML5 CSS2.1 IE Cr Op Sa Fx
Nesne Modeli
document.getElementById ("elementID") .style.backgroundImage
tarayıcılar
Internet Explorer 7.0'a kadar ve dahil olmak üzere, hasLayout özelliği ayarlanmış bir öğenin kenarlığının iç kısmına bir arka plan uygular. Öğenin bir hasLayout'u yoksa, arka plan görüntüsü özelliğişartnamede belirtildiği gibi, elemanın sınırlarını dikkate alacaktır. Kenarlar düz çizgi yerine kesikli veya noktalıysa, görüntüdeki fark fark edilir.
Öğe kaydırma veya otomatik olarak ayarlandıysa, arka plan kaydırıldığında Internet Explorer 8 bir piksel dikey gecikmeye sahip olacaktır.
7.0 sürümüne kadar olan Internet Explorer, 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 |
Sonuç bu örnek v Chrome tarayıcıŞek. 1. internet tarayıcısı Explorer, Opera ve Firefox, satırın arka planını doğru şekilde görüntüler (Şekil 2).
Pirinç. 1. Her hücre için arka planı tekrarlama
Pirinç. 2. Tüm satırın arka planı
Mülkiyetin kullanılmadığı tek bir site olmadığını düşünüyorum CSS arka planı... Görünüşe göre, bu özellikten daha basit ne olabilir? Ancak hayır, yetenekleri, bir sayfanın arka planı olarak bir resmin veya rengin olağan amacından çok daha geniştir. Bir şey tanıdık gelecek, ancak bir şey kesinlikle birçokları için bir yenilik olacak. Her durumda, arka planın nasıl çalıştığını iyice bilmek faydalı olacaktır.
CSS3, özelliğe birçok yeni şey getirdi, bu şeffaflık ve arka plan olarak birden çok görüntünün atanmasıdır, ancak bundan aşağıda bahsedeceğiz ve önce özelliğin temellerine bakalım. arka fon.
arka plan rengi
Arka plan rengi atamalarını birkaç kez yaptığınızdan oldukça eminim. Bu, birkaç notasyon türü kullanılarak yapılabilir: normal (renk adı kullanılır), onaltılık veya RGB notasyonu. Her tip eşittir, hangisini daha çok seviyorsan onu kullan. En kısa sürümü kullanmaya çalışıyorum ve algı için daha basit ve stil dosyasının boyutu biraz daha küçük.
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'ün şeffaflık desteği vardır, böylece bizim rengimize de ekleyebilirsiniz, şöyle:
P (arka plan rengi: rgba (255, 0, 0, 0.5);)
Son hane %50 şeffaflığa ayarlandı. Saydamlık değerini 0'dan (tamamen saydam arka plan) 1'e (tamamen opak) ayarlayabilirsiniz.
arka plan görüntüsü
Bu özellik de çok sık kullanılır, arka plana bir resim atamanıza izin verir. CSS3, her biri bir tür katman oluşturan arka plana birden çok görüntü atama yeteneği ekler, 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 düğmeleri vidalamanız gerekiyor. Az ya da çok akıcı bir düzen sağlamak, tek bir görüntü kullanmak bir seçenek değildir. Bu nedenle 4 "katman" yapıyoruz, her görüntüyü kendi köşesine taşıyoruz ve bu kadar, sorun çözüldü
Gövde (arka plan resmi: url ("image1"), url ("image2"), url ("image3"))
Arka plana tek bir resim atamanız gerekiyorsa kodda sadece ilkini bırakıyoruz, bu anlaşılabilir bir durum bence.
Herhangi bir resmi arka plan olarak kullanırken akılda tutulması gereken iki kural vardır:
- kullanıcının herhangi bir nedenle bir resim görüntüleyememesi durumunda zıt bir arka plan rengi ayarlayın. Corny görüntülerin görüntülenmesini kapatabilir, trafikten tasarruf sağlar.
- iletmek için bir arka plan resmi kullanmayın. önemli bilgi... Yukarıda belirtilen sebepten dolayı kullanıcı görmeyebilir.
Birden çok arka plan görüntüsü desteği yeterince geniştir. Tüm tarayıcılar, hatta IE8 bile bu özelliği destekler.