HTML ve CSS'de metin ve blokları düzenlerken en yaygın görevlerden biri. Sadece bir kodlayıcı tarafından değil, sitenin içeriğini düzenleyen herhangi bir içerik yöneticisi tarafından da karşılaşılabilir. Bu sorunu çözmek için yalnızca iki özellik kullanılır: renk - metin rengi, arka plan - arka plan, renk veya görüntü ile çalışma.

CSS'de Test Rengi ile Çalışmak

renk yalnızca metin için bir renk belirtmek için gereken bir özelliktir. Renk hem HTML HEX kod formatında hem de RGB (Kırmızı Yeşil Mavi) formatında belirtilebilir. Renk kodları, Photoshop gibi grafik programlarında veya çevrimiçi olarak seçilebilir.

Özellik sözdizimi:

Renk: Renk;
Şimdi özelliği uygulayın:

İçerik(
renk: #444; // sınıf içeriğine sahip öğede koyu gri metin
}
Neden böyle bir örnek: bir bağlantı ve metin için bir renk belirtmek iki farklı şeydir. Unutma. Eh, kendi başıma, metnin rengini ve farklı renklerin bağlantılarını yapmanızı öneririm.

CSS'de arka planlarla çalışma

arka fon resim arka planı ile çalışmanıza izin veren bir özelliktir: arka plan rengini ayarlayın, arka plan olarak bir resim ayarlayın (jpg, gif, png biçimleri), arka plan konumunu ve aşağıda açıklanan diğer parametreleri değiştirin.

arka plan rengi- Bu özellik yalnızca arka plan rengini ayarlamak için kullanılır. Yalnızca renk kodunu kabul eder. Renk, RGB (Kırmızı Yeşil Mavi) formatında veya HTML HEX kod formatında belirtilebilir.

Engellemek (
arka plan rengi: #fbb5b5; // pastel kırmızı arka plan rengini ayarla
}
Arka plan için en iyi renk örnekleri (modern tasarım modelleri: Düz Tasarım, vb.):

arka plan görüntüsü bazı görüntüleri bir öğenin arka planı olarak ayarlamak için kullanılan bir özelliktir. Bir resmi belirtmek için, url parametresi ve css stillerine sahip dosyaya göre resmin yolu yeterlidir.

#geri(
arka plan resmi: url("resimler/fon.jpg");
}

arka plan-tekrar- yalnızca arka plan görüntüsü özelliği yukarıda belirtildiğinde kullanılabilir. Bu özellik, görüntü tekrar kuralını belirler. Varsayılan olarak, görüntü x ekseni boyunca ve y ekseni boyunca öğenin sınırlarına kadar tekrarlanır (arka plan öğeden daha küçükse). Özellikte, görüntülerin yalnızca X ekseni boyunca - tekrar-x (yatay olarak), yalnızca Y boyunca - tekrar-y (dikey olarak) veya hiç tekrarlanmaması - tekrarsız olarak tekrarlanacağı bir ayar belirtebilirsiniz.

#içerik(

arka plan-tekrar: tekrar-x; /* görüntü sadece blok sınırlarına kadar yatay olarak tekrarlanacak */
}

arka plan eki- arka planı bir konumda sabitler, yani görüntü bloğun içeriğiyle birlikte kayar veya sabit kalır. Varsayılan değer, arka planın konumunu düzeltmeyen kaydırmadır.

#içerik(
arka plan resmi: url("background.jpg");
arka plan-tekrar: tekrar-x; /* resim sadece yatay olarak tekrarlanacak */
arka plan eki: sabit; /* konuma sabitlendi */
}

arka plan konumu- öğedeki arka planın konumunu belirten bir özellik. İki değer verilir: yatay konum ve ardından dikey konum. Sayısal (piksel ve yüzde) veya alfabetik (sol, orta, sağ, üst, alt) olarak belirtilir. Bu özellik, görüntü tekrarlanmadığında (tekrarlanmadığında) ve arka planın öğede belirli bir şekilde konumlandırılması gerektiğinde gereklidir.

#engellemek(
arka plan konumu: sol orta; /* yatay - sol tarafta, yükseklik - ortada */
}
Yorumlarda her şeyin açık olduğunu düşünüyorum)
Sayısal bir değer yazma örneği:

#anahtarlar (
arka plan konumu: 109 piksel 57 piksel; /* sol dolgu 109 piksel, üst 57 piksel */
}
Burada da her şeyin açık olması gerektiğini düşünüyorum.
Birçok mülk? Gelin kısaca nasıl yazılacağını görelim.

Sonuçta. Arka plan için CSS kısayolu

Tüm parametrelerin bir satırda belirtileceği kısaltılmış bir gösterim kullanabilirsiniz:

Arka plan: renkli görüntü tekrar eki konumu;

Artılar hakkında. Böyle bir kayıt, tarayıcı tarafından sayfa yükleme ve oluşturma süresini azaltır. Ziyaretçilere acıyın, elbette birkaç mülke ihtiyacınız yoksa, bu şekilde yazmak daha iyidir.
Evet, ihtiyaç yoksa herhangi bir mülkü atlayabilirsiniz! Siz sadece listenin aşağılarına değerler eklemeye devam edin.

Engellemek (
arkaplan: #f1f1f1 url("background.jpg") tekrar-x kaydırma 100px 125px;
}

Arka planların CSS'de nasıl çalıştığına bir örnek

Örnek kod. Çalışmanın sonucunu ve kaynak kodunu aşağıdaki linkten görebilirsiniz.

Bir arka plan görüntüsü durumunda, bloğun boyutlarını belirtmek daha iyidir, aksi takdirde içeriğe göre boyutu alacaktır.

Merhaba, blog sitesinin sevgili okuyucuları. Bugün, Html'deki herhangi bir öğenin arka planını ayarlamanıza izin veren beş CSS kuralına bakacağız - arka plan konumu (resim, tekrar, renk, ek). Pekala, Arka Plan bileşik kuralından bahsetmeyi unutmayalım.

Bunda zor bir şey yoktur, ancak hazır bir şablon hakkında bilmeniz gereken bazı incelikler ve nüanslar vardır (bunu unutmayın, bu herhangi bir tasarımın tüm ayrıntılarını açmanıza yardımcı olacaktır).

Size bir kez daha hatırlatmama izin verin, bu makalenin bir serinin parçası olduğunu ve stil işaretlemesini en baştan, yani CSS'nin ne olduğu ve neyle yenildiğiyle ilgili bir makaleden başlamak en iyisi olacaktır, sonra sırayla takip edin. referans kitabında verilmiştir. Her durumda, bu size kalmış olsa da, şimdi arka planı ayarlamaktan bahsedelim.

Renk, arka plan rengi ve arka plan görüntüsü

Önce Html öğelerinin renginin kullanılarak nasıl ayarlandığını görelim. css renk kuralları. Aslında, burada her şey basit. Sözdizimi tamamen normaldir ve rengi, köprü metni biçimlendirme dilinde yapıldığı şekilde ayarlayabilirsiniz. Hatırlayacağınız gibi, hash işaretinden sonra (hash - “#fe35a3”) veya üç rakam yardımıyla, birincisi sırasıyla ikincinin, üçüncünün dördüncünün, kuyu ve beşincinin değeriyle eşleşirse, altıncı ile ("#aa33ff" renk kodu "a3f" olarak kısaltılabilir).

Ayrıca, Html ve Css kodundaki renkler kelimeler olarak gösterilebilir (örneğin, "kırmızı"), ancak en sık onaltılık kod kullanılır:

Renk:#303

Örnek olarak, bu küçük paragrafı yukarıdakiyle aynı renge boyadım (#303). 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.

Böyle, css arka planı içinİstenirse tek bir takımda birleştirilebilen beş kuralı karşılayın. Bunları görmek için mevcut W3C spesifikasyon sayfasına gidebilir ve orada Arka Plan kelimesiyle bir şey arayabilirsiniz:

1. arka plan rengi - bu kural, herhangi bir Html öğesi için arka plan rengini ayarlar. İçindeki 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), yolun url () işlevinde gösterileceği yol.

Şartnameye bakarsanız görürsünüz. varsayılan arka plan rengi herhangi bir öğe şeffaf olacaktır (kuralın varsayılan değeri "background-color:transparent" şeklindedir). Doğru, öğelerde varsayılan olarak şeffaf olmayacak çünkü. bunlar sistem öğeleridir ve onlar için her şey farklıdır ve sıradan köprü metni biçimlendirme dili etiketlerinden farklıdır.

Arka plan rengindeki renk standart olarak ayarlanır (altı veya üç onaltılık basamak veya bir sözcük):

Arka plan rengi:#FEFCDE

Örneğin, bu paragrafın arka planı, hemen yukarıda verilen renk koduyla arka plan rengi aracılığıyla tam olarak 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 belirtilebilir. arka plan görüntüsü.

Stil biçimlendirme dili belirtimine bakarsanız, arka plan görüntüsünün varsayılan olarak "hiçbiri" 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 gerekir:

Background-image: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, orijinalinde şöyle görünen, tekrar eden bir görüntüyle kaplandığını görebilirsiniz:

Şunlar. grafik dosyasının yolunu belirten yalnızca bir arka plan görüntüsü kuralı kullanıldığında, bu görüntü, web sayfasında bu belirli Html öğesi için ayrılan tüm alanı kaplayana kadar hem dikey hem de yatay olarak çoğaltılacaktır (örneğimizde, paragraf). Bu neden oluyor?

Arka plan-tekrar - arka plan resmini tekrarla

Evet, çünkü CSS kuralı için herhangi bir değer yazmadık arka plan-tekrar, bu, onun 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 eksenlerde tekrarlama) ile aynı olduğunu görüyoruz. Cevap kendiliğinden geldi.

Bu nedenle, arka plan tekrarı ile yapabiliriz arka plan görüntüsü tekrarlarını yönet. Bu kuralın yalnızca dört değeri olabilir:




Arka plan konumu - arka planın konumu

Ş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 bunun 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 öğe alanının sol üst kenarına basıldığı anlaşılır. Çünkü "0% 0%" değeri arka plan konumu kuralı için varsayılandır.

Eh, bu kural öğe için açıkça ayarlanmadığında (bizim durumumuzda olduğu gibi), tarayıcı varsayılan belirtimde kabul edilen değerini seçer (CSS'deki koordinat eksenlerinin sadece sol üst kenardan bildirildiğini not ediyorum. 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. Eh, belirli dijital değerlere karşılık gelecek kelimeleri de kullanabilirsiniz. Ama önce ilk şeyler.

Arka plan görüntüsünün konumunu ayarlarken mutlak birimleri kullanarak arka plan konumu, son konumunu belirlemek için aşağıdaki ilkeye sahiptir:

Şunlar. tarayıcı, nesnenin konumlandırıldığı alanın orijininden bu görüntünün kendisinin 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 aracılığıyla konumlandırdım:

Arkaplan resmi:url(https://website/image/logo.png); arka plan-tekrar:tekrar yok; arka plan konumu:400 piksel 25 piksel;

Lütfen bu durumda, bu paragraflar için ayrılmış alanın merkezine değil, görünümün merkezine hizalanacağını unutmayın. Gerçekte böyle bir arka plan görüntüsünün yerleştirilmesinin kullanılmasının 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 görüntü her zaman görünüm alanında görünür olacaktır ve bu tam olarak arka plan eki CSS'nin kullanımıdır. Modern blok düzeninde mülk.

biraz daha var mı Prefabrik Kural Arka Planı, bu, yukarıda açıklanan beş kuralın tümünü tek bir şişede birleştirmenize olanak tanır. Ayrıca, birleşik sürümdeki beşinin 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 şey tarayıcı tarafından varsayılan değer olarak kabul edilecektir.

Png) tekrarsız %50;

Örnekte gösterilen montaj kuralı, açıklık için bu paragrafa uygulanır. Güzel olmadı, ama mesele bu değil. Bu paragraf tuhaf bir sarı arka plan rengi kullanır ve LiveInternet logosunun paragrafın ortasına hizalanmış bir görüntüsünü kullanır. Çünkü arka plan ekleme kuralı için hiçbir değer ayarlanmaz, ardından kaydırma (varsayılan) kullanılır.

Bazı öğeler için yalnızca renkle dolguyu ayarlamak istiyorsanız ve arka plan görüntüsüyle uğraşmıyorsanız, bunun yerine bunu yapabilirsiniz:

Arka plan rengi:#FEFCDE

yazı yazmak:

Arka plan:#FEFCDE

Prefabrik 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 sayfaları sitesinde görüşürüz

adresine giderek daha fazla video izleyebilirsiniz.

");">


ilgini ç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 rengi nasıl değiştirilir?
Konum (mutlak, göreli ve sabit) - HTML öğelerini CSS'de konumlandırmanın yolları (sol, sağ, üst ve alt kurallar)
CSS'de kaydırın ve temizleyin - yerleşim araçlarını engelleyin
Fare imlecini değiştirmek için Z-endeksi ve CSS İmleç kuralı ile konumlandırma

yardım ile CSS rengi ve arka planı Web sayfasının hemen hemen her öğesini ayarlayabilir, arka plan görüntüsünü, yatay ve dikey olarak tekrarını özgürce kontrol edebilirsiniz. Ek olarak, CSS kullanarak, konumlandırmayı kullanarak arka plan görüntüsünü ekranın herhangi bir yerine yerleştirebilirsiniz. Henüz uzağa koşmayalım, sırayla gidelim.

COLOR özelliği

Bu özellik, öğenin rengini, daha özel olarak öğenin içindeki metnin rengini ayarlar. Değer, olası biçimlerden birinde verilir:

• renk adı (YEŞİL, SİYAH, KIRMIZI...);
• onaltılık renk kodu (008000, 000000, FF0000...);
• RGB'de ondalık renk kodu (renk:rgb (40, 175, 250));

COLOR özelliği devralınır ve herhangi bir öğe için bir değer ayarlanmazsa, değer onun atasından devralınır. Ancak ata için de ayarlanmamış olabilir - bu durumda tarayıcının stil sayfası varsayılan değerler kullanılarak uygulanacaktır. Bu durumda elemanın renginin siyah olması muhtemeldir.

Daha önce de bahsettiğim gibi, hemen hemen tüm elementler için bir renk belirleyebilirsiniz, (H1... H6), (güçlü, em) ve hatta tam (p) ve hatta tablo kenarlıkları olabilir, ancak daha sonraları.

CSS kullanarak metin rengini ayarlamaya bir örnek:

h1 (renk : Mavi )

Bu örnekte, web sayfasının tüm birinci düzey başlıkları mavi olacaktır:

güçlü (renk: kırmızı)

Bu durumda, sayfanın metnindeki her şey etiketiyle vurgulanacaktır. kuvvetli, kırmızıya döner.

Şu şekilde yazılabilir:

h1, p, güçlü (renk : yeşil )

Daha sonra ilk seviyenin başlıkları, tüm paragraflar ve etiketle vurgulanan her şey yeşil olacaktır.

Başlıkları farklı renklerde vurgulamak gerektiğinde sınıf seçiciler kullanılır. HTML'de bir sınıfı tanımlamak için bir nitelik kullanılır sınıf Herhangi bir elemana uygulanabilen A. HTML kodunda şunları yazmanız gerekecek:

sınıf="mavi"> Bu sınıfın başlıklarının rengi mavi olacaktır.

CSS stil sayfasında, bu durumda, H1 öğesinin seçici olacağı bir kural yazarız ve nokta ( . ) sınıf adı:

h1.Blue (renk: mavi)

HTML belgelerinde tanımlayıcıya göre seçiciler de kullanılır, bunlar öznitelik tarafından tanımlanır İD. Bir tanımlayıcı, bir sınıftan daha önemli veya öncelikli bir niteliktir. Ve öğenin HTML kodunda hem sınıf hem de tanımlayıcı belirtilirse, tanımlayıcının stili uygulanacaktır. Tanımlayıcı bir pound işaretiyle gösterilir ( # ). Tanımlayıcıyı HTML kodunda kullanmak için şunu yazmanız gerekir:

id="mavi"> Bu tanımlayıcının başlıklarının rengi mavi olacaktır

Sırayla stil sayfasında:

h1#Mavi (renk: mavi)

ARKA PLAN-RENK özelliği

Bu özellik, genel olarak herhangi bir HTML öğesi için bir bütün, paragraf, bağlantı olarak sayfanın arka plan rengini ayarlamanıza olanak tanır. Bunu yapmak için, özellik değerinde renk veya değer belirtilir. şeffaf(şeffaf). Sayfa arka planı için kod yazılır:

gövde (arka plan rengi: aqua )

Bu durumda sayfanın arka planı turkuaz olacak ve başlığa arka planı vermek için şunu yazıyoruz:

h1 (arka plan rengi : sarı )

Birinci seviye başlıklarının sarı arka planını alıyoruz.

CSS'de renk ve arka plan

ARKA PLAN-TEKRAR özelliği

Bu özellik, ayarlandığında yatay ve dikey olarak tekrarlanıp tekrarlanmayacağını belirlemek için kullanılır. Geçerli değerler:

• tekrarlamak- görüntü dikey ve yatay olarak tekrarlanır;
• x'i tekrarla- görüntü yalnızca yatay olarak tekrarlanır;
• tekrar-y- görüntü yalnızca dikey olarak tekrarlanır;
• tekrarsız- görüntü tekrarlanmaz.

Kod şöyle yazılır:

P(
arka plan resmi : url( resim dosyası adresi) ;
arka plan-tekrar: tekrar-x
}

Bu paragrafın metni, yatay olarak konumlandırılacak olan arka plan görüntüsünün üstünde olacaktır.

ARKA PLAN-EK özelliği

Bu özellik, tarayıcıya sayfanın arka plan görüntüsünün metinle birlikte kaydırılıp kaydırılmayacağını söylemek için kullanılır ( taslak) veya hareketsiz kal ( sabit).

gövde (
arka plan resmi : url( resim dosyası adresi) ;
arkaplan-tekrar : tekrar-x ;
arka plan eki: sabit
}

Bu durumda, arka plan görüntüsü sabit kalacaktır.

ARKA PLAN-POZİSYON özelliği

Bu özellik, resmi göreli olarak konumlandırmak için kullanılır. Değerler, anahtar kelimelerle yüzde (%), uzunluk (cm, px) birimlerinde ayarlanır:

• Dikey:
• Tepe- görüntünün üst kısmı, sayfanın veya bloğun üst kenarıyla hizalıdır;
• merkez
• alt- görüntünün alt kısmı, sayfanın veya bloğun alt kenarıyla hizalanır.
• yatay:
• ayrıldı- görüntünün sol kenarı, sayfanın veya bloğun sol kenarıyla hizalanır;
• merkez- görüntünün merkezi, sayfanın veya bloğun ortasına hizalanır;
• sağ- görüntünün sağ kenarı, sayfanın veya bloğun sağ kenarıyla hizalanır.

Yüzdeler, uzunluk birimleri ve anahtar kelimelerle bir kod örneği yazıyoruz:

gövde (
arka plan resmi : url( resim dosyası adresi) ;
arka plan konumu : 0% 0%
}

Gövde(
arka plan resmi : url( resim dosyası adresi) ;
arka plan konumu: 10px 25cm
}

Gövde(
arka plan resmi : url( resim dosyası adresi) ;
arka plan konumu: üst merkez
}

Yazardan: Herkese hoş geldiniz. Web tasarımında arka plan renkleri ve görseller, herhangi bir öğeyi daha çekici bir şekilde tasarlamanıza izin verdiği için büyük bir rol oynar. Html'de arka plan nasıl yapılır, bugün bakacağız.

Arka planı ayarlarken html ile geçinmek mümkün mü?

Öyle olmadığını hemen söyleyeceğim. Genel olarak, html web sayfaları tasarlamak için tasarlanmamıştır. Sadece çok uygunsuz. Örneğin, arka plan rengini ayarlamak için kullanılabilecek 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 seçenek var. Bugün en temel olanları analiz edeceğiz.

CSS ile arka plan nasıl ayarlanır?

Bu nedenle, her şeyden önce, arka planı hangi öğeye ayarlamak istediğinize karar vermeniz gerekir. Yani kuralı yazacağımız seçiciyi bulmamız gerekiyor. Örneğin, tüm sayfa için arka planı bir bütün olarak ayarlamanız gerekiyorsa, bunu gövde seçiciden, tüm bloklar için div seçiciden yapabilirsiniz. Peki, vb. Arka plan diğer seçicilere eklenebilir ve eklenmelidir: 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 (yani, bir degrade veya bir görüntü değil, düz bir renk), arka plan rengi özelliği kullanılır. 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. Renkleri seçmek için renk kodunu görebileceğiniz bir program kullanabilirsiniz. Örneğin photoshop, paint veya bazı çevrimiçi araçlar. Buna göre, örneğin, tüm web sayfası için ortak bir arka plan yazacağım.

gövde( arka plan rengi: #D4E6B3; )

Bu kodun baş bölümüne eklenmesi gerekir. Dosyaların aynı klasörde olması önemlidir.

arka plan olarak resim

Resim için küçük bir html dil simgesi kullanacağım:

ID'li 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: 400 piksel yükseklik: 250 piksel arka plan resmi: url (html .png ) ;

Bu koddan, background-image adlı yeni bir özellik kullandığımı görebilirsiniz. Yalnızca bir html öğesine arka plan olarak bir resim eklemek için tasarlanmıştır. Ne olduğunu görelim:

Bir görüntüyü belirtmek için, iki nokta üst üste işaretinden sonra url anahtar sözcüğünü yazmanız ve ardından dosyanın yolunu parantez içinde belirtmeniz gerekir. 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üntülenmiyorsa, görüntünün adını doğru yazıp yazmadığınızı, yol ve uzantının doğru ayarlanıp ayarlanmadığını tekrar kontrol edin. Tarayıcı resmi bulamadığından, arka planın basitçe görüntülenememesinin en yaygın nedenleri bunlardır.

Ama bir özelliği fark ettiniz mi? Tarayıcı, blok boyunca resmi aldı ve çoğalttı. Bildiğiniz gibi, bu arka plan resimlerinin varsayılan davranışıdır - bloğa sığabildikleri sürece dikey ve yatay olarak tekrar ederler. Bu davranışla kolayca yönetebilirsiniz. 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 x ekseninde tekrarlar;

Tekrar-y - sadece y ekseni boyunca tekrarlar;

Tekrar yok - hiç tekrarlamaz;

Her değeri yazabilir ve ne olduğunu görebilirsiniz. şöyle yazacağım:

arka plan-tekrar: tekrar-x;

arka plan - tekrar et : tekrar et - x ;

Şimdi sadece yatay olarak tekrarlayın. Tekrarsız yazarsanız, sadece bir resim olacaktır.

Harika, bununla bitirebiliriz, çünkü bunlar arka planla çalışmanın temel özellikleridir, ancak size daha fazla kontrol seçeneği elde etmenizi sağlayan 2 özellik daha göstereceğim.

Kodlayıcılar, tekrarlamayla, küçük bir görüntü kullanarak arka plan dokuları ve gradyanlar oluşturma noktasına ulaşırdı. 30 x 10 piksel veya daha küçük olabilir. Ya da 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 sonunda tek bir katı arka plan elde edildi. Bu arada, sitenizde arka plan olarak kesintisiz bir doku kullanmak istiyorsanız bu yaklaşımı kullanmaya değer. Bugünkü gradyan, css3 yöntemleri kullanılarak zaten uygulanabilir, bundan daha sonra 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 ile konum kolayca değiştirilebilir.

Farklı şekillerde sorabilirsiniz. Bir seçenek, görüntünün olması 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 bulunur, ancak yatay olarak tarafı sağa, yani doğru olanı değiştirdik. Pozisyonu ayarlamanın başka bir yolu da yüzdedir. Bu durumda geri sayım her halükarda sol üst köşeden başlar. %100 - tüm blok. Böylece, görüntüyü tam olarak merkeze yerleştirmek için şöyle yazıyoruz:

arka plan konumu: %50 %50;

arka plan konumu: %50 %50;

Konumlandırma hakkında hatırlanması gereken önemli bir şey, ilk parametrenin her zaman yatay konum, ikinci parametrenin ise dikey konum olmasıdır. 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 belirtebilirsiniz. Her şey aynı, sadece % yerine px olacak. Bazı durumlarda, bu tür 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 özelliğin stenografisini kullanmak daha doğru olacaktır. Ş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 gerek yoksa, basitçe atlayın. 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ısaltılmış olarak yazmanızı tavsiye ederim.

Arka plan görüntüsünün boyutunu kontrol etme

Mevcut imajımız bir sonraki numaraya pek uygun değil, bu yüzden farklı bir tane alacağım. Boyut olarak, bir blok gibi veya ondan daha büyük olmasına izin verin. Öyleyse, bloğunu tamamen doldurmaması için bir arka plan görüntüsü yapma göreviyle karşı karşıya olduğunuzu hayal edin. Ve örneğin resim, bloğun boyutundan bile daha büyük.

Böyle bir durumda ne yapılabilir? Tabii ki, en basit ve en makul seçenek sadece görüntüyü 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 ve fırsat yok. Sorun, nispeten yeni olarak adlandırılabilecek ve arka plan görüntüsünün ve aslında herhangi bir arka planın boyutunu değiştirmenize izin veren arka plan boyutu özelliğinin yardımıyla çö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 boyutu: %80 %50;

Yine ilk parametre yatay boyut, ikincisi dikey boyuttur. Her şeyin doğru bir şekilde uygulandığını görüyoruz - fotoğraf blok genişliğinin %80'i genişlik ve yüksekliğin yarısı oldu. Burada yalnızca bir açıklama yapmanız gerekir - boyutu yüzde olarak ayarlayarak resmin oranlarını etkileyebilirsiniz. Bu yüzden orantıları bozmak istemiyorsanız dikkatli olun.

Tahmin edebileceğiniz gibi, arka plan boyutu piksel cinsinden de belirtilebilir. Ayrıca kullanılabilecek iki değerli anahtar kelime vardır:

Kapak - görüntü, en az bir tarafı bloğu tamamen dolduracak şekilde ölçeklenir.

İçerir - görüntü maksimum boyutunda bloğa tamamen sığacak şekilde ölçeklenir.

Bu değerlerin avantajı, resmin oranlarını değiştirmemeleri ve aynı bırakmalarıdır.

Ayrıca, resmi 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. Herkes, masaüstü bilgisayarlar için tasarım yaparken siteyi ana monitör genişliklerine uyarlamanız gerektiğini bilir ve anlar: 1280, 1366, 1920. Örneğin, 1280 x 200 boyutunda bir arka plan görüntüsü alırsanız ve arka plan boyutunu ayarlamazsanız, sonra boş bir alandan daha büyük bir genişliğe sahip ekranlar belirir, resim genişliği tam olarak doldurmaz.

Vakaların %99'unda bu, web geliştiricisine uygun değildir, bu nedenle arka plan boyutu: örtüyü, görüntünün her zaman pencerenin maksimum genişliğine kadar uzanması için ayarlar. Bu kullanmak için iyi bir hiledir, ancak şimdi 1920 piksel ekran genişliğine sahip kullanıcıların yetersiz bir görüntü kalitesi görmeleri sorunuyla karşılaşacaksınız.

Maksimum genişliğe kadar uzayacağını hatırlatırım. Buna göre kalite otomatik olarak bozulacaktır. Buradaki tek doğru çözüm, başlangıçta daha büyük bir görüntü 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 yetkin bir arka plan görüntüsü seçimi ile bu sitenin görünümünü etkilemeyecek.

Sonuç olarak, bu makalede edindiğiniz bilgileri gerçek yaşam düzenlerine nasıl uygulayacağınıza dair sadece 1 örnek.

css ile yarı saydam arka plan

CSS kullanılarak uygulanabilecek bir diğer özellik de yarı saydam bir arka plandır. Yani, bu arka plan sayesinde arkasında ne olduğunu görmek mümkün olacak.

Örnek olarak, tüm sayfanın arka planını örneklerde daha önce kullandığımız görüntüye ayarlayacağım. Tüm deneylerimizi üzerinde gerçekleştirdiğimiz bg tanımlayıcılı blok için rgba renk ayar 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, grafik editörlerinde çalışanlar için oldukça iyi bilinen bir format olan rgb'dir. Şu şekilde yazılmıştır: rgb(17, 255, 34);

Parantez içindeki ilk değer kırmızının doygunluğu, ardından yeşil ve ardından 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 Değer, url() yapısı içinde belirtilen grafik dosyasının yoludur. Bu durumda, dosyanın yolu hem tırnak içinde (çift veya tek) hem de onlarsız yazılabilir. yok Öğenin arka plan görüntüsünü iptal eder. inherit Ebeveynin değerini devralır.

HTML5 CSS2.1 IE Cr Op Sa Fx

Nesne Modeli

document.getElementById("elementID ").style.backgroundImage

tarayıcılar

7.0 sürümüne kadar olan Internet Explorer, hasLayout özelliği ayarlanmış bir öğenin kenarlığının iç kısmına bir arka plan uygular. Öğenin hasLayout özelliği yoksa, background-image özelliği, belirtimde belirtildiği gibi öğenin sınırlarına uyar. Kenarlıklar düz değil kesikli (kesikli veya noktalı) ise, oluşturmadaki fark fark edilir.

Öğe kaydırma veya otomatik olarak ayarlandıysa, arka plan kaydırıldığında Internet Explorer 8 bir piksellik dikey gecikmeye sahip olacaktır.

Internet Explorer 7.0 sürümüne kadar devralma değerini desteklemez.

Arka plan bir tablo satırı için ayarlanmışsa (etiket ), ardından Chrome, Safari, iOS, spesifikasyonun öngördüğünden farklı bir şekilde, yani her hücre için ayrı olarak görüntüler. Tarayıcı, tüm satır için sağlam bir arka plan göstermelidir. Örnek 2, hatayı gösteren kodu gösterir.

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 şekilde görüntüler (Şekil 2).

Pirinç. 1. Her hücre için arka planı tekrarlayın

Pirinç. 2. Tüm satırın arka planı