Yazardan: Herkese merhaba. Arka plan renkleri ve görselleri, herhangi bir öğeyi daha çekici bir şekilde tasarlamanıza olanak tanıdığından web tasarımında büyük bir rol oynar. Bugün HTML'de arka planın nasıl oluşturulacağına bakacağız.
Arka planı ayarlamak için HTML kullanmak mümkün mü?
Hemen hayır diyeceğim. Genel olarak html, web sayfalarını tasarlamak için oluşturulmamıştır. Bu çok rahatsız edici. Örneğin arka plan rengini ayarlayabileceğiniz bir bgcolor özelliği var ancak bu çok sakıncalı.
Buna göre Cascading Style Sheets (CSS) kullanacağız. Arka plan ayarlamak için çok daha fazla fırsat var. Bugün en temel olanlara bakacağız.
Css kullanarak arka plan nasıl ayarlanır?
Yani öncelikle arka planı hangi öğeye ayarlamak istediğinize karar vermeniz gerekiyor. Yani kural yazacağımız seçiciyi bulmamız gerekiyor. Örneğin, bir bütün olarak sayfanın tamamı için arka planı ayarlamanız gerekiyorsa, bunu gövde seçici aracılığıyla ve tüm bloklar için 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 özelliğin adını yazmanız gerekiyor. Arka plan rengini (yani degrade veya görüntü değil, düz bir renk) ayarlamak için 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 kullanarak hex code, rgb, rgba, hsl formatlarını kullanabilirsiniz. Herhangi bir yöntem işe yarayacaktır.
En sık kullanılan yöntem onaltılık koddur. Renkleri seçmek için renk kodunu görüntüleyen bir program kullanabilirsiniz. Örneğin photoshop, paint veya bazı çevrimiçi araçlar. Buna göre örnek olarak tüm web sayfasının genel arka planını yazacağım.
gövde( arka plan rengi: #D4E6B3; )
Bu kodun head kısmına eklenmesi gerekmektedir. Dosyaların aynı klasörde olması önemlidir.
Arka plan olarak resim
Resim olarak küçük bir simge kullanacağım. HTML dili:
Tanımlayıcıya sahip boş bir blok oluşturalım:
< div id = "bg" > < / div > |
Açık boyutlarını ve arka planını 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 resmi. Özellikle bir html öğesine arka plan olarak bir resim eklemek için tasarlanmıştır. Bakalım neler oldu:
Bir resmi belirtmek için iki nokta üst üste işaretinden sonra yazmalısınız anahtar kelime URL'yi girin ve ardından parantez içinde dosyanın yolunu belirtin. Bu durumda yol, görüntünün html belgesiyle aynı klasörde olmasına göre belirlenir. Ayrıca resim formatını da belirtmeniz gerekir.
Bunu yaptıysanız ve blokta arka plan hala görüntülenmiyorsa, görselin adını doğru yazıp yazmadığınızı, yol ve uzantının doğru ayarlanıp ayarlanmadığını tekrar kontrol edin. Bunlar, tarayıcının görüntüyü bulamaması nedeniyle arka planın görünmemesinin en yaygın nedenleridir.
Ama bir şeyi fark ettiniz mi? Tarayıcı, görüntüyü blok boyunca alıp çoğalttı. Yani, 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 kontrol edebilirsiniz. Bunu yapmak için 4 ana değeri olan arka plan tekrarı özelliğini kullanın:
Tekrarla – varsayılan değer, görüntü her iki tarafta da tekrarlanır;
Tekrar-x – yalnızca x ekseninde tekrarlanır;
Tekrar-y – yalnızca y ekseni boyunca tekrar eder;
Tekrar yok – hiç tekrarlanmıyor;
Her değeri yazabilir ve ne olduğunu görebilirsiniz. Bunu şu şekilde yazacağım:
arka plan tekrarı: tekrarlama-x;
arka plan - tekrarla : tekrarla - x ; |
Şimdi sadece yatay olarak tekrarlayın. Tekrarlanmamayı ayarlarsanız yalnızca bir resim olur.
Harika, burada bitirebiliriz, çünkü bunlar arka planla çalışmanın temel yetenekleridir, ancak size daha fazla kontrol sahibi olmanızı sağlayan 2 özellik daha göstereceğim.
Mizanpaj tasarımcıları, tekrarlama yoluyla tek bir küçük görüntü kullanarak arka plan dokuları ve degradeler oluşturabiliyordu. 30 x 10 piksel veya daha da küçük olabilir. Ya da belki biraz daha fazlası. Görüntü öyleydi ki, bir veya her iki tarafta tekrarlandığında hiçbir geçiş görülmüyordu, dolayısıyla sonuç tek, kesintisiz bir arka plandı. Bu arada, web sitenizde arka plan olarak kusursuz bir doku kullanmak istiyorsanız bu yaklaşımı şimdi kullanmaya değer. Bugün degrade zaten css3 yöntemleri kullanılarak uygulanabiliyor, bunun hakkında daha sonra kesinlikle konuşacağız.
Arka plan konumu
Varsayılan olarak arka plan resmi, tekrarlanacak şekilde ayarlanmadığı sürece bloğunun sol üst köşesinde olacaktır. Ancak arka plan konumu özelliği kullanılarak konum kolayca değiştirilebilir.
Farklı şekillerde ayarlayabilirsiniz. Seçeneklerden biri, resmin yerleştirilmesi gereken tarafları basitçe belirtmektir:
arka plan konumu: sağ üst;
arka plan konumu: sağ üst; |
Yani dikey olarak her şey aynı kalıyor: arka plan görüntüsü üstte bulunuyor, ancak yatay olarak tarafı sağa, yani sağa değiştirdik. Pozisyon belirlemenin başka bir yolu da yüzde olarak kullanmaktır. Bu durumda geri sayım her durumda sol üst köşeden başlar. %100 - bloğun tamamı. Böylece resmi tam olarak merkeze yerleştirmek için şu şekilde yazıyoruz:
arka plan konumu: %50 %50;
arka plan konumu: %50 %50; |
Konumlandırmayla ilgili önemli bir şeyi unutmayın; ilk parametre her zaman yatay konumdur, ikincisi ise dikey konumdur. Yani %80 %20 gibi bir değer görürseniz arka plan resminin çok sağa kayacağını ancak çok aşağı inmeyeceği sonucunu hemen çıkarabilirsiniz.
Son olarak konumu piksel cinsinden belirtebilirsiniz. Her şey aynı, sadece % yerine px olacak. Bazı durumlarda böyle bir konumlandırma gerekli olabilir.
Kısa notasyon
Her şey bizim yaptığımız gibi ayarlanırsa kodun oldukça hantal olacağı konusunda hemfikir olun. Resme giden yolun, tekrarın ve konumun belirtilmesi gerektiği ortaya çıktı. Elbette tekrar ve konum her zaman gerekli değildir ancak her durumda özellik için kısa notasyon kullanmak daha doğru olacaktır. Şuna benziyor:
arka plan: #333 url(bg.jpg) tekrarsız %50 %50;
arka plan: #333 url(bg.jpg) tekrarsız %50 %50; |
Yani ilk adım, gerekirse genel düz arka plan rengini kaydetmektir. Daha sonra görüntüye giden yol, tekrar ve konum. Bazı parametrelere ihtiyaç duyulmuyorsa, onu atlayın. Katılıyorum, bu çok daha hızlı ve daha kullanışlı ve aynı zamanda kodumuzu da önemli ölçüde azaltıyoruz. Genel olarak sadece bir renk veya resim belirtmeniz gerekse bile her zaman kısaltılmış biçimde yazmanızı tavsiye ederim.
Arka plan görüntüsünün boyutunu kontrol etme
Şu andaki imajımız bir sonraki numarayı göstermek için pek iyi değil, bu yüzden başka bir tane alacağım. Bir blok boyutunda veya daha büyük olsun. Öyleyse, bloğunu tamamen doldurmaması için bir arka plan görüntüsü oluşturma göreviyle karşı karşıya olduğunuzu hayal edin. Ve örneğin resim blok boyutundan bile daha büyük.
Bu durumda ne yapabilirsiniz? Elbette 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 ve içinde yatıyor şu anda azaltmak için ne zaman ne de fırsat var. Sorun, nispeten yeni olarak adlandırılabilecek ve arka plan görüntüsünün veya herhangi bir arka planın boyutunu değiştirmenize olanak tanıyan arka plan boyutu özelliği kullanılarak çö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;
arka plan boyutu: %80 %50; |
Yine, ilk parametre yatay boyutu, ikinci parametre ise dikey boyutu belirler. Her şeyin doğru uygulandığını görüyoruz - fotoğraf, blok genişliğinin% 80'i genişlikte ve yarı yükseklikte oldu. 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 belirtilebiliyor. Ayrıca kullanılabilecek iki anahtar kelime daha vardır:
Kapak – görüntü, en azından bir tarafta bloğu tamamen dolduracak şekilde ölçeklenecektir.
İçer – görüntünün maksimum boyutta bloğa tamamen sığması için ölçeklendirir.
Bu değerlerin avantajı resmin oranlarını değiştirmeyip aynı bırakmalarıdır.
Ayrıca resmin uzatılmasının kalitesinin bozulmasına yol açabileceğini de anlamalısınız. Mizanpaj tasarımcılarının hayatından ve gerçek uygulamalarından örnek verebilirim. Herkes, masaüstü bilgisayarlar için tasarım yaparken siteyi ana monitör genişliklerine uyarlamanız gerektiğini biliyor ve anlıyor: 1280, 1366, 1920. Örneğin 1280 x 200 boyutunda bir arka plan görüntüsü alırsanız ve bunu vermezseniz bir arka plan boyutunda, daha sonra genişliğe sahip ekranlar Boş bir alan görünecek, görüntü genişliği tamamen doldurmayacaktır.
Vakaların %99'unda bu, web geliştiricisine uygun değildir, bu nedenle arka plan boyutu: cover'ı, görüntünün her zaman pencerenin maksimum genişliğine kadar uzanacağı şekilde ayarlar. Bu, kullanılması iyi bir tekniktir, ancak artık 1920 piksel ekran genişliğine sahip kullanıcıların optimumun altında resim kalitesi görebilmesi sorunuyla karşı karşıya kalacaksınız.
Şunu da hatırlatayım, maksimum genişliğine kadar esneyecektir. 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 kademeli olarak kırpılacak, ancak aynı zamanda arka plan görüntüsünün doğru seçilmesiyle, dış görünüş Bu durum siteyi etkilemeyecektir.
Genel olarak bu, bu makalede edindiğiniz bilgilerin gerçek mizanpajları düzenlerken nasıl kullanılacağına dair yalnızca bir örnektir.
CSS kullanarak yarı saydam arka plan
İle uygulanabilecek başka bir özellik css kullanmak – yarı saydam 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 görselin arka planı olarak sayfanın tamamını ayarlayacağım. Tüm deneylerimizi yaptığımız bg tanımlayıcılı blok için arka planı rgba renk ayar formatını kullanarak ayarlayacağız.
Daha önce de söylediğim gibi CSS'de renkleri ayarlamak için birçok format vardır. Bunlardan biri, çalışanlar için oldukça iyi bilinen bir format olan RGB'dir. grafik editörleri. Şu şekilde yazılır: rgb(17, 255, 34);
Parantez içindeki ilk değer kırmızının, ardından yeşilin, ardından mavinin doygunluğudur. Değer 0 ila 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'dan 1'e kadar olabilir; burada 0 tam şeffaflıktır.
Vlad Merjeviç
Web sayfalarının özelliklerinden dolayı arka plan resimleri site belgelerinin düzeninde önemli bir rol oynar. Aynı zamanda, örneğin metne resim ekleme sürecini otomatikleştirmek, degrade geçişler oluşturmak ve tabii ki içeriğin altına bir arka plan eklemek gibi çeşitli şeylerle aktif olarak ilgileniyorlar. Aşağıda arka plan resimlerini kullanmanın bazı yönleri verilmiştir.
Bir web sayfasının arka planı
Bir web sayfasında arka plan resminin ayarlanması geleneksel olarak etiketin arka plan özelliği aracılığıyla gerçekleşir.
.Bu model yatay ve dikey olarak tekrarlanarak tarayıcı penceresinin tamamını doldurur. Burada yaratıcılık için özel bir seçeneğin olmadığı açık, o yüzden stillere dönüp CSS kullanarak neler yapılabileceğini görelim.
CSS'nin arka plan resmini kontrol eden beş özelliği vardır: eklenmesi, konumu ve tekrarlanması. Ancak tüm bu parametrelerin yerini gelecekte kullanacağımız tek bir evrensel özellik olan arka plan alır.
Resim ekleme, url anahtar sözcüğünü kullanarak resmin adresini ayarlayarak gerçekleşir. Bir görüntünün tekrarını kontrol etmek için tekrarlama yok, tekrarlama-x (yatay olarak tekrarla) ve tekrarla-y (dikey olarak tekrarla) argümanları kullanılır. Bu sayede Şekil 2'de gösterilen web sayfasını alabilirsiniz. 1.
Bir web sayfasına bir görsel ayarlamak için, Örnek 1'de gösterildiği gibi GÖVDE seçiciye bir arka plan stili özelliği eklemeniz gerekir.
Örnek 1: Arka plan resmi
Bu örnekte, target.gif grafiği, görseli tekrarlamadan web sayfasının arka planı olarak tanımlanmıştır. Görüntünün tarayıcının kenarlarına sıkı bir şekilde sığmasını önlemek için orijinal konumundan 30 piksel sağa ve 20 piksel aşağı kaydırılır.
Bir desenin tekrarlanması
Arka plan desenini yatay veya dikey olarak tekrarlanacak şekilde ayarlayabilmeniz nedeniyle, web sayfalarının tasarımı için çeşitli seçenekler mevcuttur. Örneğin, sol kenar boyunca dikey bir şerit oluşturmak için (Şekil 2), Şekil 2'de gösterilen görüntüye ihtiyacınız olacaktır. 3.
Tasarım, gözle görülür ek yerleri olmadan dikey olarak birbirine oturacak ve ayrıca web sayfasının belirtilen arka plan rengiyle tek bir bütün oluşturacak şekilde olmalıdır.
Örnek 2, yine arka plan özelliğini ve onun tekrar-y değerini kullanarak böyle bir arka plan görüntüsünün nasıl oluşturulacağını gösterir.
Örnek 2. Arkaplanın dikey olarak tekrarlanması
Benzer şekilde, örneğin bir degrade oluşturarak ve bunu arka plan görüntüsü olarak ayarlayarak arka planı yatay olarak tekrarlayabilirsiniz (Şek. 4).
Şekil 2'de gösterilen web sayfasını almak için. 4'te öncelikle degrade geçişli bir resim yapmanız gerekecek. Genişlik 20-40 piksel belirtmek için yeterlidir ve görüntünün yüksekliği, belgenin amacına ve web sayfasının içeriğinin beklenen yüksekliğine bağlıdır. Ayrıca büyük bir çizimin grafik dosyasının boyutunu artıracağını da unutmayın. Bu da yükleme hızını olumsuz yönde etkileyecek ve sonuçta arka plan görüntüsünün yavaşlamasına yol açacaktır. Bu durumda 30x200 piksellik bir resim oldukça uygundur (Şekil 5).
Örnek 3, degrade bir arka plan oluşturmak için HTML kodunu göstermektedir.
Lorem ipsum...
Degrade tasarımı tek renkli blokla iyi uyum sağlar; dolayısıyla bu örnekte web sayfasının içeriğini görüntülemek için bir katman ekliyoruz.
Bir arka plan görüntüsü kullanarak, başlıklar gibi belirli metinlere grafik ekleme işlemini otomatikleştirebilirsiniz. Bunu yapmak için istenen seçiciye uygulanan arka plan evrensel özelliğini kullanın. Değer, resme giden yoldur ve tekrarlanmasını önlemek için tekrarlanmayan argümandır (örnek 4).
Örnek 4: Resim ekleme
Başlık
Ana metin
Bu örnekte gösterildiği gibi resim orijinal konumuna göre yatay ve dikey olarak hareket ettirilebilir; varsayılan olarak burası sol üst köşedir. blok elemanı. Arka plan kaydırma, görüntüyü metne göre istediğiniz şekilde konumlandırmanıza olanak tanır. Metnin görüntüyle örtüşmesini önlemek için, metnin belirtilen mesafe kadar sağa kaydırılması nedeniyle padding-left özelliğini eklemelisiniz. Her durumda bireyseldir ve genellikle resmin genişliği artı resim ile metin arasında istenen boşluğa eşittir.
Hemen hemen her popüler web sitesi hoş bir görünüme sahiptir. Web sitesi tasarımının önemli bir parçası, her birimizin oluşturabileceği veya değiştirebileceği, arka plan olarak da adlandırılan arka plandır. Bu yazımda size bir web sitesine nasıl arka plan yerleştireceğinizi 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. Degrade kullanarak arka plan
- 4. Büyük bir görselin arka planı
Tek renk kullanarak arka plan oluşturma
Sitenin tek renkten oluşan arka planını oluşturmak veya değiştirmek için dosyaya gitmeniz gerekir. stil.css, içinde değerin bulunduğu gövde (sitenin ana gövdesinden sorumludur). Şimdi, eğer mevcut değilse, arka plan rengi işlevini kaydetmeniz ve renk kodunu belirtmeniz gerekir. Bir web sitesi için beyaz bir arka plan oluşturmanız gerektiğinde aşağıdaki kodu yazmanız gerekecektir:
arka plan rengi: #83C5E9 ; (örnekteki gibi mavi arka plan)
Renklerin tam listesini web sitesinde (STM) bulabilirsiniz. Rengi değiştirmek için iki nokta üst üste işaretinden sonraki değeri değiştirin ve çabalarınızın tadını çıkarın.
Doku kullanarak arka plan oluşturma
Bu yöntem, site için güzel bir arka plan oluşturmanıza olanak tanıdığı için son zamanlarda özellikle popüler hale geldi. Dokular basit ama çok güzel olabilir, bu yüzden sıklıkla kullanılırlar. Herhangi bir dokuyu bağlamak için sitenizin kurulu olduğu hostingdeki görsel klasörüne yüklemeniz gerekmektedir. Bundan sonra aşağıdaki kodu yazmalısınız:
arka plan rengi: #537759;
arka plan resmi: url(resimler/desen.png);
Bu kod, rengi korumak için tanıdık bir parametre (yeşildir) ve yeşil dokuyu bağlamaktan sorumlu bir öğe içerir.
Degrade kullanarak arka plan oluşturma
CSS işlevleri kullanılarak bağlanan herhangi bir görüntü hem yatay hem de dikey olarak (eksenler boyunca) tekrarlanabilir X Ve e). Bu fırsat, site için herhangi bir basit arka planı kendi ellerimizle oluşturmamıza olanak tanır. Bunu yapmak için 1 megapiksel genişliğinde bir degrade oluşturmanız (aşağıdaki resme bakın), bunu resim olarak kaydetmeniz ve hostinginize yüklemeniz gerekir. Bundan sonra gerekli kodu yazabilirsiniz:
arka plan rengi: #83C5E9;
arka plan resmi: url(resimler/gradient.jpg);
arka plan tekrarı: tekrarlama-x;
Bu sette öncelik sırasına göre reasürans için kullandığımız arka plan renginden sorumlu bir fonksiyon bulunmaktadır. Bundan sonra degradeyi bağlamaktan sorumlu bir parametre ve son olarak degradeyi X ekseni boyunca tekrarlamaktan sorumlu bir fonksiyon gelir.
Web sitesinin arka planı için büyük bir resim kullanma
Bu yöntem, arka plan oluşturmak için çeşitli resimler kullanmanıza izin verdiği için en popüler ikinci yöntemdir. Bu yöntemi uygulamak için yalnızca indirmeniz gerekir büyük resim site görsellerinin bulunduğu klasöre aşağıdaki kodu yazın:
arka plan rengi: #000000;
arka plan resmi: url(resimler/resim başlığı.jpg);
arka plan konumu: orta üst;
arka planda tekrarlama: tekrarlama yok;
İlk iki parametrede her şey açıksa, son ikisinin ele alınması gerekir. Üçüncü işlev, görüntüyü sitenin ortasına sabitlemenize olanak tanır ve son parametre, tüm sayfa yapısı boyunca tekrarlanmasını engeller.
Ucoz web sitelerinde arka planı değiştirme
Bir web sitesi için arka plan oluşturmanın bu yöntemleri, farklı sistemler site yönetimi, ancak sitelerde değil - ucoz. Ucoz web sitesinin arka planını değiştirmek için site kontrol paneline gitmeniz, "Tasarım Yönetimi" ve ardından "Ş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ınıza yapıştırmanız gerekiyor ve arka plandaki resme erişebileceksiniz.
Yeni bir arka plan kullanmak için onu yüklemeniz yeterlidir. Dosya yöneticisi. Aynı zamanda yeni arka plan görselinin adının değişiklikten önceki ile aynı olduğundan emin olun. Çalışmanızı kaydedin ve yapılan işi görüntülemek için web sitesine gidin.
Sitenin arka planını HTML olarak değiştirme
Bir görsel kullanarak bir html sitesinde arka plan oluşturmak istiyorsanız, koddaki satırı girmeniz yeterlidir:
Ve sitenin arka planını renk kullanarak yapmak istiyorsanız, çizgi şöyle görünmelidir:
Bu hikayemizi tamamlıyor. Artık bir web sitesi için nasıl arka plan oluşturulacağını biliyorsunuz. Mutlu projeler!
Modern tarayıcılar, her bir arka planın parametrelerini virgüllerle ayırarak listeleyerek, bir öğeye isteğe bağlı sayıda arka plan resmi eklemenize olanak tanır. Evrensel arka plan özelliğini kullanmak ve bunun için önce bir arka plan ve virgülle ayırarak ikinci bir arka plan belirlemek yeterlidir.
Arka planı pencerenin tam genişliğine nasıl uzatabilirim?
Arka planı ölçeklendirmek için arka plan boyutu özelliğini kullanın; değerini %100 olarak ayarlayın, ardından arka plan tarayıcı penceresinin tüm genişliğini kaplayacaktır. Tarayıcıların eski sürümleri için, örnek 1'de gösterildiği gibi öneklerle birlikte belirli özellikleri kullanmalısınız.
Bir web sayfasına arka plan resmi nasıl eklenir?
Bir web sayfasına arka plan resmi eklemek için, arka plan stili özelliğinin url değeri dahilinde resmin yolunu ayarlayın; bu, daha sonra gövde seçiciye eklenir.
Animasyonlu bir arka plan yapmak mümkün mü?
Animasyon, herhangi bir belgeye hayat verebilecek oldukça güçlü bir tekniktir, bu nedenle web sayfalarına çizgi film ve etkileşimli sayfalar ekleyen Flash teknolojisinin son derece popüler hale gelmesi şaşırtıcı değildir. Grafik formatı GIF ayrıca kareleri sırayla değiştirerek basit animasyonu da destekler. Dolayısıyla, bu formattaki bir görüntüyü kullanarak yalnızca tek tek görüntüleri değil, aynı zamanda bir web sayfasının veya belirli bir öğenin arka planını da canlandırmak mümkündür.
Öncelikle programı kullanabileceğiniz GIF formatında animasyonlu bir resim oluşturmanız gerekecektir. Adobe Photoshop veya bu amaca uygun başka bir şey. Ayrıca arka plan görüntüsü olarak kullanılabilecek hazır animasyonlu dosyalardan oluşan kütüphaneler de vardır. Daha sonra görüntü, Örnek 1'de gösterildiği gibi arka plan stili özelliği kullanılarak arka plan olarak eklenir.
Sayfanın sağ alt köşesine arka plan resmi nasıl yerleştirilir?
Arka plan görüntüsünün sayfadaki konumunu kontrol etmek için arka plan konumu stili özelliği kullanılır; görüntünün yatay ve dikey koordinatlarını aynı anda ayarlar. Bir arka plan görüntüsünün yinelenmesini iptal etmek için, arka plan konumu özelliğini no-repeat değeriyle kullanın.
Arka planın tekrarlanmaması nasıl sağlanır?
Varsayılan olarak arka plan görüntüsü yatay ve dikey olarak tekrarlanarak web sayfasının tüm alanı boyunca bir mozaik oluşturulur. Ancak bu arka plan davranışı, özellikle tek bir görüntü söz konusu olduğunda her zaman gerekli değildir. yardım gelecek arka plan stili özelliğine tekrarlanmayan bir değer eklendi.
Arka planın yalnızca dikey olarak tekrarlanmasını nasıl sağlayabilirim?
Arka plan tekrarı genellikle bir web sayfası öğesinin veya penceresinin yüksekliğine bağlı dekoratif çizgiler veya degradeler oluşturmak için gereklidir. Bu gibi durumlarda arka planın dikey olarak tekrarlanması, öğelerin boyutundan bağımsız olarak tutarlı bir resim sağlar. Sadece ilk başta arka plan görüntüsünün dikişsiz tekrarlandığından emin olmalısınız.
Kısa bilgi
CSS sürümleri
Değerler
url Değer, giden yoldur grafik dosyası url() yapısının içinde belirtilen. Dosyanın yolu tırnak işaretleri içinde (çift veya tek) veya bunlar olmadan yazılabilir.none Öğenin arka plan resmini devre dışı bırakır.
HTML5 CSS2.1 IE Cr Op Sa Fx
arka plan resmi
Nesne modeli
document.getElementById("elementID ").style.backgroundImage Tarayıcılar
İnternet Explorer
Sürüm 7.0'a kadar (sürüm 7.0 dahil), arka planı hasLayout özelliği ayarlanmış bir öğenin kenarlığının iç kısmına uygular. Öğenin bir hasLayout'u yoksa, arka plan resmi özelliği, belirtimde belirtildiği gibi öğenin sınırlarına uyacaktır. Kenarlıklar düz çizgi yerine kesikli veya noktalıysa ekrandaki fark fark edilecektir.
Öğe kaydırma veya otomatik olarak ayarlanmışsa, Internet Explorer 8'de arka plan kaydırıldığında bir piksellik dikey gecikme olur.
none Öğenin arka plan resmini devre dışı bırakır.
| 1 | 2 | 3 |
), ardından Chrome, Safari, iOS bunu spesifikasyonda belirtildiği gibi değil, yani her hücre için ayrı ayrı görüntüler. Tarayıcının tüm satır için sağlam bir arka plan göstermesi gerekirken. Örnek 2, hatayı gösteren kodu göstermektedir. TR için arka plan Sonuç bu örnek V Chrome tarayıcıŞekil 2'de gösterilmiştir. 1.
İnternet Tarayıcısı
Explorer, Opera ve Firefox hattın arka planını doğru şekilde gösteriyor (Şekil 2).