arka plan görüntüsü:
Açıklama
Arka plan resmi özelliği(İngilizce "arka plan görüntüsü" - "arka plan görüntüsü" nden) bir öğenin arka plan görüntüsünü ayarlar.
Not
Bir arka plan görüntüsü ayarlarken, görüntü yoksa kullanılacak arka plan rengini de belirtmelisiniz. Bir görüntü mevcut olduğunda, arka plan rengi üzerinde görüntülenir. (Bu şekilde, görüntünün saydam kısımlarında renk görünür olacaktır).
Kullanım Şartları
CSS3 ile başlayarak (virgülle ayrılmış), aynı anda birden çok arka plan görüntüsü belirtebilirsiniz. Bu, alt arka plan görüntülerini üst arka plan görüntülerinin saydam alanlarından görünür hale getirecektir.
JavaScript
[nesne] .style .backgroundImage = "[değer]";
tarayıcı desteği
Şartname
Değerler
Tüm değerler CSS 1 CSS 2.0 CSS 2.1 CSS 2.2 CSS 3
Yok Arka plan resmi olmadığını gösterir. url (
arka plan resmi: url (myImage.png);
URL'si ("
arka plan resmi: url ("myImage.png");
Devral Öğenin, üst öğenin parametrelerini devralması gerektiğini belirtir.
Başlangıç değeri:"Hiçbiri".
kullanım örneği
Kod Listeleme
Arka plan görüntüsü
Birden çok arka plan görüntüsü içeren bir belge.
Web sitesi tasarımı bir arka planla başlar.
Arka plan rengini belirtmek doğru olacaktır - özellik arka plan rengi, güvenlik ağı için, resim yüklenmiyorsa. Parantez içinde url () resimlerle klasörün yolunu belirtin.
Varsayılan olarak, görüntü tüm tarayıcı ekranını doldurana kadar kendisini bir "karo" gibi tekrar edecektir, biz sayfada aşağı indikçe "döşememiz", sayfa içeriği sona erdiği sürece hem ikinci ekranı hem de üçüncü ekranı dolduracaktır. . Böyle bir sonucun bir tasarım fikrinin yüksekliği olmadığı ve bir "banyomuz" olmayacağı, sadece okunabilirliğin çok önemli olduğu bir blogumuz olacağı açıktır.
"Döşeme" den kurtulmanın basit bir seçeneği, tüm ekranı dolduracak şekilde en az 1024 piksel genişliğinde büyük bir görüntü kullanmaktır. Ayrıca sorunsuz bir doku bulmak için iyi bir çözüm olacaktır, çarpıldığında resim bir bütün olarak olacaktır.
Arka plan nasıl daha çekici hale getirilir?
Allah'a şükür bunun için yardımcılarımız var:
- tekrarsız- tekrarlamayı devre dışı bırak
- tekrar-x- desenin sadece yatay olarak tekrarı
- tekrar-y- desenin sadece dikey olarak tekrarı
Örneğin:
Blog başlığı
Bu, yalnızca yatay olarak yinelenen bir arka plan dokusudur.
Bir sonraki yardımcı mülktür arka plan konumu, arka plan görüntüsünü ekranda herhangi bir yere konumlandırmanıza olanak tanır. Bu teknik, modern web tasarımında yaygındır. Bir resmimiz var, ancak içeriğin bir parçası değil, sadece site için bir dekorasyon görevi görüyor.
Başlık
Belirli bir konumlandırma ile tekrarlanmayan bir arka plan örneği.
Resim yalnızca bir kez görüntülenir ve sağda bulunur.
Metnin arka planla çakışmasını önlemek için sağ kenardan girinti 200 piksele ayarlanmıştır.
Ekranı aşağı kaydırırken resmin her zaman görünmesini istiyorsak, özelliği yukarıdaki koda eklememiz gerekir - arka plan eki: sabit;
arasındaki fark nedir? resim ve arka plan görüntüsü?
Fark temeldir, etiket resim doğrudan vücuda yerleştirilmiş HTML-sayfalar ve içerikten sorumludur (illüstrasyonlar, fotoğraflar, avatarlar), anlamsal bir yük taşır. Resmin arama motorları tarafından indekslenmesi ve arama sonuçlarına girmesi çok önemlidir. Özellikler CSS arka plan resmi- siteyi benzersiz ve güzel hale getirin, yani harici bir dosyaya çıkarılması gereken bu tasarım CSS stiller veya bir öğenin içinde kullanım stil.
Tabii bu demek değil ki arka plan görüntüsü vücuda konulursa çalışmaz HTML-sayfalar. Ancak tasarımla ilgili her şeyin içeriden çıkarılmasını şiddetle tavsiye ederim. CSS... Sonuç olarak, temiz alacağız. HTML-kod:
- bu sitenin indekslenmesine olumlu etki yapacak, arama botları sitenizi sevecek ve daha sık ziyaret edecek.
- ziyaretçileriniz de memnun kalacak, site düşük ağırlığı nedeniyle daha hızlı yüklenecektir.
- bir web yöneticisi olarak temiz kodla çalışmayı daha kolay buluyorsunuz.
Eh, mülkü kullanan tüm seçenekleri aşağı yukarı düşündük. CSS arka plan resmi... Daha fazla uygulama arkadaşlar! Kodu kopyalamaktan ve kendi seçeneklerinizi oluşturmaktan çekinmeyin!
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 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 veya sonraki sürümleri, hasLayout özelliği ayarlanmış bir öğenin kenarlığının iç kısmına bir arka plan uygular. Bir öğenin hasLayout'u yoksa, background-image özelliği, spesifikasyonda belirtildiği gibi öğenin sınırlarına uyacaktı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 |
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ı tekrarlama
Pirinç. 2. Tüm satırın arka planı
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 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 veya sonraki sürümleri, hasLayout özelliği ayarlanmış bir öğenin kenarlığının iç kısmına bir arka plan uygular. Bir öğenin hasLayout'u yoksa, background-image özelliği, spesifikasyonda belirtildiği gibi öğenin sınırlarına uyacaktı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 |
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ı 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, mülke birçok yeni şey getirdi, bu şeffaflık ve arka plan olarak birden fazla resim atamaktır, ancak aşağıda bundan bahsedeceğiz ve önce, mülkün temellerine bakacağız. 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.
- önemli bilgileri iletmek için bir arka plan resmi kullanmayın. 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.
