Sayfa arka planı nasıl ayarlanır? CSS'de metin rengi ve arka plan rengi

Ders 7. HTML'de metin ve arka plan rengi.

Tarih: 2008-12-05

Bir web sayfasında arka plan ve metin rengi nasıl ayarlanır?

Varsayılan olarak, metnin rengi ve genel olarak web sayfalarındaki herhangi bir yazı tipi her zaman siyah (#000000 ). Ancak, her zaman kesinlikle sevdiğimiz ve belirli bir sitenin tasarımına uygun veya daha uygun görünen herhangi bir rengi ayarlayabiliriz.

Metin rengini ayarla

HTML'de metnin, yazı tipinin, arka planın ve diğer öğelerin rengi iki şekilde ayarlanabilir:

1. Yöntem 1.Çift etiketlerde öznitelik yazılır İstenilen rengin adı ile. Rengin adı İngilizce olarak belirtilmiştir. Örneğin web sayfamızdaki başlık rengi şu şekilde ayarlanabilir:

Bu makale (ders) hakkındaki yorumlar:

Andrey! Ne harika bir siteniz var! İkinci haftadır düzenli olarak kullanıyorum: Derslerinizi ve video eğitimlerinizi inceliyorum; Literatürünüzü okuyorum ve programlar indiriyorum; Web programlamada ilk adımlarımı atıyorum! Ve en önemlisi, bunu yapabilirim!!! Ve ben hiç fizikçi değilim, ama bir söz yazarıyım! Ve edebiyat sitemi ziyaret eden herkes buna ikna olabilir: "OLEG GUZ'DAN ŞİİRLER" Bilgilerim: e-posta: [e-posta korumalı] web sitesi: http://sites.google.com/site/stihiolegguz/

kodu dikkatlice kontrol edin

Arka plan rengini değiştirmeyi denedim ve işe yaramıyor! Arka plan rengi nasıl değiştirilir?

Herhangi bir oda, yerde pahalı bir İran halısı ile çok daha iyi görünecektir. Peki sitenizin nesi var? Belki de zemini pahalı, zarif, el yapımı bir halıyla “örtme” zamanı gelmiştir. Site için nasıl arka plan yapılacağına daha yakından bakalım:

site için arka plan

Eski site tasarımı zaten sıkıcı oluyor. Ve yeni ve lezzetli bir şey istiyorum. Ve kendin pişirirsen yeni tasarım böyle olacak.

Ancak kaynağın tüm tasarımını kendi başınıza değiştirmek nankör bir şeydir. Ve herkesin elleri bu iş için uygun şekilde "bilenmiş" değil. Bu nedenle, kaynağın arka plan rengini veya arka plan görüntüsünü değiştirerek eski bir şablonu yenilemek en kolay yoldur.

Bir web sitesinde arka planı değiştirmenin birkaç yolu vardır. Bunun için CSS veya html'nin olanaklarından yararlanılır. Ancak bu web teknolojilerinde arka plan özelliklerinin çoğu aynı ada ve kullanıma sahiptir.

HTML arka plan temelleri

Arka plan olarak birkaç öğe kullanılabilir:

• Renk;
• arka plan görüntüsü;
• Doku resmi.

Her birinin kullanımına daha ayrıntılı olarak bakalım.

Bir sitenin arka plan rengini ayarlamak için style niteliğinin background-color özelliğini kullanın. Yani, bir web sayfasının ana rengini ayarlamak için onu etiketin içine kaydetmeniz gerekir. . Örneğin:

Web Sitesi Arka Planı #55D52B

Onaltılık renk koduna ek olarak, bir anahtar kelime veya RGB değeri desteklenir. Örnekler:

Web sitesi arka planı rgb(23,113,44)

Web sitesi arka planı yeşil

Arka plan rengini anahtar kelimeler kullanarak ayarlamak, diğer iki yönteme kıyasla bir takım sınırlamalara sahiptir.

Html'de yalnızca 16 renkli anahtar kelime desteklenir. İşte bunlardan birkaçı: beyaz, kırmızı, mavi, siyah, sarı ve diğerleri.

Bu nedenle, bir html sitesinin arka planını ayarlamak için hex veya RGB kullanmak daha iyidir.

Renk seçimine ek olarak, diğer özelleştirme seçenekleri de mevcuttur. background-color özelliğinin Transparent olarak ayarlanması sayfanın arka planını saydam yapar. Bu değer, varsayılan olarak bu özelliğe atanır.

Şimdi, site için arka plan resmini ayarlamak için hiper metin dilinin olanaklarına bakalım. Bu, background-image özelliği ile yapılabilir.

Koddan da görebileceğiniz gibi, resim parantez içinde verilen url yolu ile bağlanmıştır. Ancak tüm resimler, boyutlarıyla tüm ekran alanını dolduracak kadar büyük değildir. Küçük resmin nasıl gösterileceğini görelim.

Diyelim ki şiirle ilgili bir site geliştiriyoruz ve arka plan olarak bir Pegasus resmi kullanmak istiyoruz. Kanatlı at, şairin yaratıcı düşüncesinin özgürlüğünü kişileştirecek!

Görüntünün ekranın ortasında bir kez gösterilmesini istiyoruz. Ancak ne yazık ki tarayıcı bizim yüce arzularımızı anlamıyor. Ve sitenin arka planı için ekran alanının sığabileceği kadar çok kez daha küçük bir resim görüntüler:

Muhtemelen, kanatlı dört gülen at, ilham için şairler için çok fazla olacaktır. Bu nedenle Pegasus'umuzun klonlanmasını yasaklıyoruz. Bunu background-repeat özelliği ile yapıyoruz. Olası değerler:

• tekrar-x - arka plan resmini yatay olarak tekrarla;
• tekrar-y - dikey olarak;
• tekrarlayın - her iki eksende;
• tekrar yok - tekrar yasaktır.

Bu seçenekler arasında sonuncusu ile ilgileniyoruz. Sitenin arka planını değiştirmeden önce kodumuzda kullanıyoruz:

Ancak, elbette, broşürümüzün ekranın ortasında olması daha iyidir. background-position özelliği, yalnızca arka plan görüntüsünü sayfada konumlandırmak içindir. Konum koordinatlarını birkaç şekilde ayarlayabilirsiniz:

• anahtar kelime ( üst, alt, orta, sol, sağ);
• Yüzde - geri sayım sol üst köşeden başlar;
• Ölçü birimi cinsinden (piksel).

Merkezleme için en basit seçeneği kullanalım:

Kaydırma sırasında resmin konumunu düzeltmeniz gerekir. Bu nedenle, sitenin arka planına bir resim yapmadan önce, arka plan eki özel özelliğini kullanın. Kabul ettiği değerler şunlardır:

• taslak;


• sabit.

Son değere ihtiyacımız var. Şimdi örnek kodumuz şöyle görünecek:

Web sitesi doku arka planı

İlk örnekte arka plan için geniş ve güzel bir çöl manzarası kullandık. Ama böyle bir güzellik için tam olarak ödemeniz gerekiyor. Yüksek kaliteli bir görüntünün ağırlığı birkaç megabayta ulaşabilir.

Böyle bir hacim, yüksek hızlı İnternet bağlantısı olan tarayıcı tarafından sayfanın yüklenme hızını etkilemez. Peki ya kullanırken birkaç " metre" indirmenin uzun zaman alacağı mobil İnternet?

Tüm bu problemler, dokulu bir arka plan yardımıyla çözülür. Doku deseni olarak küçük bir görüntü kullanır. Defalarca tekrarlansa bile çizim sadece bir kez yüklenir.

Site için koyu bir arka plan oluşturmak için Photoshop'a gidin, 1200 piksel uzunluğunda ve 15 piksel genişliğinde bir şerit şeklinde bir görüntü oluşturun. Ardından basit bir siyah beyaz gradyan uyguluyoruz ve ortaya çıkan dokuyu site sayfasına bağlıyoruz:

CSS Araçları

Yukarıda açıklanan tüm özellikler Basamaklı Stil Sayfaları için de geçerlidir. Önceki örneklerimizden birini yeniden yazarak bir css web sitesi arka planı oluşturalım.

Hemen hemen her popüler site güzel bir görünüme sahiptir. Web sitesi tasarımında önemli bir kısım, arka plan olarak da adlandırılan, her birimizin oluşturabileceği veya değiştirebileceği arka plandır. Bu yazıda size siteye nasıl arka plan koyacağınızı anlatacağım.

Web siteleri için yeni bir arka plan oluşturma

Görevi tamamlamak için 4 yöntemden birini kullanabilirsiniz:

• 1. Tek renkli arka plan
• 2. Dokulu arka plan
• 3. Degradeli arka plan
• 4. Büyük resimli arka plan

Tek renkle bir arka plan oluşturun

Tek renkten oluşan sitenin arka planını oluşturmak veya değiştirmek için dosyaya gitmeniz gerekiyor. stil.css, değerin bulunacağı - gövde (sitenin ana gövdesinden sorumludur). Şimdi, orada değilse, arka plan rengi işlevini yazmanız ve renk kodunu belirtmeniz gerekir. Site için beyaz bir arka plan oluşturmanız gerektiğinde, aşağıdaki kodu yazmanız gerekecektir:

arka plan rengi: #83C5E9 ; (örnekte olduğu gibi mavi arka plan)

Renklerin tam listesini web sitesinde bulabilirsiniz - (STM). Rengi değiştirmek için iki noktadan sonraki değeri değiştirmeniz yeterli ve işinizin keyfini çıkarın.

Dokulu bir arka plan oluşturma

Bu yöntem, site için güzel bir arka plan oluşturmanıza izin verdiği için son zamanlarda özellikle popülerdir. Dokular basit ama çok güzel olabilir, bu yüzden sıklıkla kullanılırlar. Herhangi bir texture bağlanabilmesi için sitenizin kurulu olduğu hosting üzerindeki image klasörüne yüklenmesi gerekmektedir. Bundan sonra, aşağıdaki kodu yazmalısınız:

arka plan rengi: #537759;

arka plan resmi: url(resimler/pattern.png);

Bu kodda, rengi korumak için tanıdık bir parametre (yeşildir) ve yeşil dokuyu bağlamaktan sorumlu bir öğe vardır.

Gradyan ile arka plan yapma

Css işlevleri kullanılarak bağlanan herhangi bir görüntü hem yatay hem de dikey olarak tekrarlanabilir (eksenler boyunca X Ve Y). Bu özellik, site için herhangi bir basit arka planı kendi ellerimizle oluşturmamızı sağlar. Bunu yapmak için 1 megapiksel genişliğinde bir gradyan oluşturmanız (aşağıdaki resme bakın), bunu bir resim olarak kaydetmeniz ve barındırmaya yüklemeniz gerekir. Bundan sonra gerekli kodu yazabilirsiniz, yani:

arka plan rengi: #83C5E9;

arka plan resmi: url(resimler/gradient.jpg);

arka plan tekrarı: tekrar-x;

Bu sette öncelik sırasına göre reasürans için kullandığımız fon renginden sorumlu bir fonksiyon bulunmaktadır. Bundan sonra, gradyanı bağlamaktan sorumlu bir parametre ve son olarak gradyanı X ekseni boyunca tekrarlamaktan sorumlu bir fonksiyon.

Sitenin arka planı için büyük bir resim kullanmak

Bu yöntem, bir arka plan oluşturmak için farklı resimler kullanmanıza izin verdiği için en popüler ikinci yöntemdir. Bu yöntemi uygulamak için sitenin resimler klasörüne büyük bir resim yüklemeniz ve aşağıdaki kodu yazmanız yeterlidir:

arka plan rengi: #000000;

arka plan resmi: url(resimler/resim başlığı.jpg);

arka plan konumu: orta üst;

arka plan tekrarı: tekrar yok;

İlk iki parametrede her şey açıksa, son ikisi vurgulanmalıdır. Üçüncü işlev, görüntüyü sitenin ortasına sabitlemenizi sağlar ve son parametre, sayfa yapısı boyunca tekrarını engeller.

ucoz web sitelerinde arka planı değiştirme

Bir site için arka plan oluşturma yöntemleri, farklı içerik yönetim sistemlerinde kullanılabilir, ancak sitelerde kullanılamaz - ucoz. ucoz sitesinin arka planını değiştirmek için site kontrol paneline gitmeniz gerekiyor, "Tasarım yönetimi" ve sonra "Şablonları Düzenleme".

Şimdi Stil Sayfasını (CSS) açmanız, satırı bulmanız gerekiyor. vücut ve parametre arka plan. Bundan sonra, bağlantıyı kopyalayıp İnternet tarayıcısına yapıştırmanız gerekir ve arka plan olan resme erişebilirsiniz.

Yeni arka planı kullanmak için onu Dosya Yöneticisine yüklemeniz yeterlidir. Aynı zamanda, arka plan için yeni görüntünün adının değişiklikten öncekiyle aynı olduğundan emin olun. Çalışmanızı kaydedin ve yapılan işi görüntülemek için siteye gidin.

Sitenin arka planını HTML olarak değiştirin

Bir resim kullanarak bir html sitesinde arka plan yapmak istiyorsanız, koddaki satırı girmeniz yeterlidir:

Ve sitenin arka planını renk kullanarak yapmak istiyorsanız, çizgi şöyle görünmelidir:

Bu hikayemizi sonlandırıyor. Artık bir web sitesi için nasıl arka plan yapılacağını biliyorsunuz. Başarılı projeler!

Yazardan: Herkese hoş geldiniz. Web tasarımında arka plan renkleri ve resimler, 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 idare etmek mümkün mü?

Öyle olmadığını hemen söyleyeceğim. Genel olarak, html web sayfaları tasarlamak için tasarlanmamıştır. Bu çok rahatsız edici. Örneğin, arka plan rengini ayarlamak için kullanılabilecek 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 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 vermelisiniz. Yani kuralı yazacağımız seçiciyi bulmamız gerekiyor. Örneğin, tüm sayfanın arka planını bir bütün olarak ayarlamanız gerekiyorsa, bunu gövde seçici aracılığıyla, tüm bloklar için div seçici aracılığıyla yapabilirsiniz. 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 görüntü olmayan düz bir renk), background-color ö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 kelime kullanımı, hex code, rgb, rgba, hsl formatları. Herhangi bir yöntem yapacak.

En sık 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 belirleyeceğim.

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

Bu kodun head bölümüne girilmesi gerekmektedir. Dosyaların aynı klasörde olması önemlidir.

Arka plan olarak resim

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

Kimliği olan boş bir blok oluşturalım:

Açık boyutlar ve bir arka plan verelim:

#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 görüntüyü bir html öğesine arka plan olarak eklemek için tasarlanmıştır. Ne olduğunu görelim:

Bir resim belirtmek için, iki noktadan sonra url anahtar kelimesini yazmalı ve ardından dosyanın yolunu parantez içinde belirtmelisiniz. Bu durumda yol, görüntünün html belgesiyle aynı klasörde olmasına bağlı olarak belirtilir. 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ı görüntüyü 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ı resmi blok boyunca 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 tekrarlanırlar. Bu davranışla kolayca yönetebilirsiniz. Bunu yapmak için, 4 ana değeri olan background-repeat özelliğini kullanın:

Tekrarla - varsayılan değer, görüntü her iki tarafta da tekrarlanır;

Tekrar-x - yalnızca x ekseninde tekrar eder;

Tekrar-y - yalnızca y ekseni boyunca tekrar eder;

Tekrar yok - hiç tekrar etmez;

Her bir değeri yazıp ne olduğunu görebilirsiniz. Şöyle yazacağım:

arka plan tekrarı: tekrar-x;

Şimdi sadece yatay olarak tekrarlayın. Tekrarsız yazarsanız, o zaman sadece bir resim olur.

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.

Tekrarla, kodlayıcılar küçük bir görüntü kullanarak arka plan dokuları ve degradeler 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 hatta her iki tarafta tekrarlandığında hiçbir geçiş görünmüyordu, böylece sonunda tek bir sağlam arka plan elde edildi. Bu arada, sitenizde arka plan olarak kesintisiz bir doku kullanmak istiyorsanız, bu yaklaşımı şimdi kullanmaya değer. Bugünkü gradyan zaten css3 yöntemleri kullanılarak uygulanabilir, bunun hakkında daha sonra kesinlikle konuşacağız.

Arka plan konumu

Varsayılan olarak, arka plan görüntüsü, yinelenecek şekilde ayarlanmamışsa, bloğunun sol üst köşesinde olacaktır. Ancak konum, arka plan konumu özelliği ile kolayca değiştirilebilir.

Farklı şekillerde sorabilirsiniz. Seçeneklerden biri, görüntünün olması gereken kenarları basitçe belirtmektir:

arka plan konumu: sağ üst;

Yani, dikey olarak her şey aynı kaldı: arka plan görüntüsü üstte, ancak yatay olarak tarafı sağa, yani sağ tarafa değiştirdik. Konumu belirlemenin 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 görüntüyü tam olarak merkeze yerleştirmek için şu şekilde yazıyoruz:

arka plan konumu: %50 %50;

Konumlandırma hakkında hatırlanması gereken önemli bir nokta, birinci parametrenin her zaman yatay konum, ikinci parametrenin ise dikey konum olmasıdır. Yani, %80 %20 gibi bir değer görürseniz, o zaman hemen arka plan görüntüsünün güçlü bir şekilde sağa kaydırılacağı, ancak fazla aşağı inmeyeceği sonucuna varabilirsiniz.

Ve son olarak, konumu piksel cinsinden belirleyebilirsiniz. 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ğu konusunda hemfikir olun. Resme giden yolun, tekrarın ve pozisyonun ayarlanması gerektiği ortaya çıktı. Elbette tekrar ve konum her zaman gerekli değildir ama her halükarda steno özelliğini kullanmak daha doğru olacaktır. Şuna benziyor:

arka plan: #333 url(bg.jpg) tekrarsız %50 %50;

Yani, gerekirse ilk adım, genel düz arka plan rengini kaydetmektir. Ardından görüntüye giden yol, tekrar ve konum. Bazı parametrelere ihtiyaç 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 olsun. Öyleyse, bloğunu tamamen doldurmaması için bir arka plan resmi 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 görüntüyü basitçe 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ılabilen ve arka plan görüntüsünün boyutunu ve aslında herhangi bir arka planı değiştirmenize izin veren background-size özelliğinin yardımıyla çözülebilir.

Böylece, resmim artık bloktaki tüm alanı kaplıyor, ancak ona bir arka plan boyutu vereceğim:

arka plan boyutu: %80 %50;

Yine ilk parametre yatay boyut, ikincisi dikey boyuttur. Her şeyin doğru uygulandığını görüyoruz - fotoğrafın genişliği blok genişliğinin% 80'i ve yüksekliğinin yarısı haline geldi. Burada sadece bir açıklama yapmanız gerekiyor - boyutu yüzde olarak ayarlayarak resmin oranlarını etkileyebilirsiniz. Oranları bozmamak istiyorsanı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.

İçer - görüntünün maksimum boyutunda bloğa tamamen sığması için ölçekler.

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

Ayrıca, resmin gerilmesinin 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 tasarım yaparken siteyi ana monitör genişliklerine uyarlamanız gerektiğini herkes bilir ve anlar: 1280, 1366, 1920. Örneğin 1280'e 200 boyutunda bir arka plan resmi çekerseniz ve arka plan boyutunu şu şekilde ayarlamazsanız: o zaman boş bir alandan daha geniş genişliğe sahip ekranlar belirir, resim genişliği tamamen doldurmaz.

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

Size maksimum genişliğe kadar uzanacağı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ü - 1920 piksel genişliğinde - kullanmak olacaktır. Daha sonra, en geniş ekranlarda doğal boyutunda olacak ve diğerlerinde yavaşça kesilecek, ancak aynı zamanda yetkin bir arka plan görüntüsü seçimi ile bu, sitenin görünümünü etkilemeyecektir.

Sonuç olarak, bu, bu makalede edindiğiniz bilgileri gerçek hayattaki düzenlere nasıl uygulayacağınıza dair yalnızca bir örnektir.

css ile yarı saydam arka plan

Css kullanılarak uygulanabilen 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 olacaktır.

Örnek olarak, tüm sayfanın arka planını örneklerde daha önce kullandığımız resme ayarlayacağım. Tüm deneylerimizi yürüttüğümüz 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, css'de renkleri ayarlamak için birçok format var. Bunlardan biri de grafik editörlerinde çalışanlar için oldukça iyi bilinen bir format olan rgb. Şöyle yazılır: rgb(17, 255, 34);

Parantez içindeki ilk değer kırmızının, ardından yeşilin ve ardından 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.

Html'de sitenin arka planı belirlenmez, css stilleri üzerinden yazılır ama bu sadece teorik bir formalitedir. Şimdi bu arka planı nasıl tanımlayacağımızı bulalım.

Bir site veya ayrı bir blok için arka plan

Bu amaca ulaşmak için bir css dosyasına ihtiyacımız olduğu için onu oluşturup html'ye bağlamamız gerekiyor. Bu içinde yazılmıştır. Bundan sonra işe başlayabilirsiniz. İlk olarak, arka planı neye ayarlamak istediğinize karar vermelisiniz. Tüm sayfa bir bütün olarak ise, bunu şu şekilde yapabilirsiniz:

Gövde( Arka plan rengi: beyaz; )

Yani, tüm sayfamızı temsil eden body etiketine atıfta bulunuyoruz. background-color özelliği, arka plan rengini ayarlamak için kullanılır. Peki ya arka planı düz renk yerine bir grafiğe ayarlamak isterseniz? O zaman şöyle yazmalısın:

Gövde( Arkaplan resmi: url(resme giden yol. resim uzantısı))

Netlik için, her şeyi bir örnekle daha ayrıntılı olarak ele almayı öneriyorum. Bunun için aşağıdaki görseli kullanacağım:

Örneğin, arka plan resmi: url(comp.png) . Bu örnekte, css dosyasıyla aynı klasörde olan png formatında comp adlı bir arka plan resmi ayarladık (ben öyle adlandırdım).
Html'de, üzerinde css özelliklerinin çalışmasını göstermek için belirli boyutlarda rastgele bir blok oluşturacağım.

Ve işte bunun için stiller:

#ct( Arka plan resmi: url(comp.png); genişlik: 600 piksel; yükseklik: 400 piksel; )

İşte sahip olduklarımız:

Nedenmiş? Gerçek şu ki, varsayılan olarak tarayıcı, bloğu tamamen doldurmak için görüntüyü birçok kez tekrarlar. Bazen bu, örneğin dikişsiz süslemeler kullanıldığında gereklidir, ancak bizim durumumuzda bir resim olmalıdır. Neyse ki, bu çok kolay bir şekilde yönetilebilir.

yinelenen arka plan

Arka plan olarak bir resminiz varsa, sayfanın tüm alanını doldurmak için varsayılan olarak yatay ve dikey olarak tekrarlanır. Bunu kaldırmak için, background-repeat özelliği kullanılır ve değeri tekrarlanmaz (tekrar etme). Bir de şu değerler var:

• Tekrar-x - sadece yatay olarak tekrarla
• Tekrar-y - yalnızca dikey

Grafik arka planımızın özelliklerine ekleyelim:

arka plan tekrarı: tekrar yok;

Konum

background-position özelliği görüntünün nereye yerleştirileceğini belirler. Burada yatay ve dikey olarak iki değer ayarlanır. Örnekler: arka plan konumu: sağ alt - sağ alt köşedeki konum, sol üst - alt üstteki konum (varsayılan olarak böyle devam eder), 250 piksel 500 piksel - sol üst köşeden sağa 250 piksel ve aşağı 500.

Örneklere daha iyi bakalım:

arka plan konumu: sağ üst;

Resim sağ üst kenara taşınacaktır. Ayrıca bloğa kenarları görünsün diye sarı bir arka plan verdim.

arka plan konumu: %50 %50;

Görüntü, bloğunda tam olarak merkezde göründü. Evet, evet, pozisyon kayıt yüzdesi nedeniyle bu da mümkündür.

arka plan konumu: %70 %20;

Arka plan yatay olarak %70 ve dikey olarak %20 kaydırılır.

Piksel cinsinden negatif bir konum değeri belirtmeye de izin verilir. Bu, örneğin büyük bir hareketli grafik görüntüsü kullandığınızda ve bu hareketli grafiğin istenen bölümünü engellemeniz gerektiğinde yapılabilir.

Arka plan sabitleme

Ayrıca background-attachment adlı bir özelliği de gerçekten seviyorum. Yalnızca iki değeri vardır ve ilki varsayılandır (kaydırma). Bu, sayfayı kaydırdığınızda arka planın da kayacağı ve tekrarsız bir görsel kullanırsanız, sonunda sona erecek ve sadece düz bir rengin devam edeceği anlamına gelir.

Bunun olmasını engellemek için background-attachment:fixed yazılır ve artık arkaplanımız güvenli bir şekilde yerine sabitlenir. Bu, bir blok için sabit bir konumun nasıl tanımlanacağına benzetilebilir ve kaydırıldığında sayfadan kaybolmaz.

Tüm bu iyiliğin kısaltılmış bir kaydı

Arka plan yapmanıza izin veren birçok özelliği analiz ettik, ancak hepsini uygularsanız hantal bir notasyon elde edersiniz. Çok zarif bir çözüm var. background özelliği, gerekli ayarları bir boşlukla ayırarak şu sırayla yazmanıza olanak tanır:
Arka plan: renkli görüntü tekrar sabitleme konumu;
Ve şimdi her şey şu şekilde yazılabilir:

Arka plan: sarı url(comp.png) tekrarsız %20 100px;

Bazı özelliklerin tanımlanması gerekmiyorsa, o zaman basitçe atlanır (bizim durumumuzda, arka plan eki yazmadık).

çok sayıda arka plan

Peki ya birden fazla arka plan resmine ihtiyacınız varsa? Olur, ne yapabilirsin. Bugün css bu özelliği desteklemektedir. Biz de deneyelim. Bu simgeyi al

Adını dizüstü koydum.

Ve işte multifonu yerleştirme kodu:

Arka plan: url(comp.png) tekrarsız %20 100px, url(laptop.png) tekrarsız %50 %50; arka plan rengi: sarı

Gördüğünüz gibi tek yapmanız gereken ilk resimden sonra virgül koymak ve ikinci resim için ayarları yapmak. Bu durumda düz rengi ayrı ayrı ayarlamak daha iyidir.

Aynı şekilde, istediğiniz kadar çok resim kaydedebilirsiniz, ancak aşırıya kaçmayın - çok fazla grafik pek iyi değildir.

Bu makaleyi burada bitirmek istiyorum. Arka planla daha birçok ilginç şey yapabilirsiniz, gelecekte onlar hakkında yazmaya çalışacağım (ve zaten bir şeyler yazdım - örneğin). Bu özellik ile iyi şanslar.