kısa bilgi

CSS sürümleri

Değerler

url Değer, url () yapısında belirtilen grafik dosyasının yoludur. Bu durumda, dosyanın yolu tırnak içinde (çift veya tek) veya onlarsız yazılabilir. hiçbiri Öğenin arka plan görüntüsünü iptal eder. miras alır Üst öğenin değerini 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çine bir arka plan uygular. Öğenin hasLayout'u yoksa background-image özelliği, spesifikasyonda belirtildiği gibi öğenin kenarlıklarına uyacaktır. Kenarlıklar düz değil de kesikli veya noktalı ise ekrandaki fark fark edilebilir.

Öğe kaydırmaya veya otomatik olarak ayarlanmışsa, Internet Explorer 8'de arka plan kaydırıldığında bir piksellik dikey gecikme olacaktır.

Internet Explorer 7.0 veya üzeri, devralma değerini desteklemez.

Arka plan bir tablo satırı için ayarlanmışsa (etiket ), ardından Chrome, Safari, iOS, spesifikasyonda belirtildiği gibi, yani her hücre için ayrı ayrı görüntülemez. Oysa tarayıcının tüm satır için sağlam bir arka plan göstermesi gerekir. Örnek 2, hatayı gösteren kodu göstermektedir.

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

Şekil: 1. Her hücre için arka planı tekrarlama

Şekil: 2. Hattın tamamı için arka plan

Sanırım mülkün kullanılmadığı tek bir site yok 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 şeyler tanıdık gelecek, ancak bir şeyler 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 saydamlık ve arka plan olarak birden fazla görüntü atama gibi birçok yeni şey getirdi, ancak aşağıda bunun hakkında konuşacağız ve önce mülkün temellerine bakacağız. arka fon.

arka plan rengi

Eminim birçok kez arka plan rengi ataması yapmışsınızdır. Bu, çeşitli gösterim türleri kullanılarak yapılabilir: normal (renk adı kullanılır), onaltılık veya RGB gösterimi. Her tür eşittir, hangisini en çok sevdiğinizi kullanın. En kısa versiyonu kullanmaya çalışıyorum ve algı için daha basit ve stil dosyası 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, şeffaflık desteğine sahiptir, bu nedenle onu aşağıdaki gibi rengimize ekleyebilirsiniz:

P (arka plan rengi: rgba (255, 0, 0, 0.5);)

Son rakam% 50 şeffaflığa ayarlandı. Saydamlık değerini 0 (tamamen şeffaf arka plan) ile 1 (tamamen opak) arasında ayarlayabilirsiniz.

arka plan görüntüsü

Bu özellik ayrıca çok sık kullanılır, arka plana bir görüntü atamanıza izin verir. CSS3, arka plana birden çok görüntü atama yeteneği ekler, her biri bir tür katman oluşturur, 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 şeyleri sabitlemeniz gerekiyor. Az ya da çok akışkan bir düzen sağlamak, tek bir görüntü kullanmak bir seçenek değildir. Bu nedenle 4 "katman" oluşturuyoruz, her resmi kendi köşesine taşıyoruz ve işte bu, sorun çözüldü

Gövde (arka plan resmi: url ("resim1"), url ("resim2"), url ("resim3"))

Arka plana bir resim atamanız gerekiyorsa, kodda sadece ilkini bırakıyoruz, bunun anlaşılabilir olduğunu düşünüyorum.
Herhangi bir resmi arka plan olarak kullanırken akılda tutulması gereken iki kural vardır:

• kullanıcının herhangi bir nedenle bir resmi görüntüleyememesi durumunda karşıt bir arka plan rengi ayarlayın. Eski 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ı bunu göremeyebilir.

Birden fazla arka plan görüntüsü desteği yeterince geniştir. IE8 dahil olmak üzere tüm tarayıcılar bu özelliği destekler.

arka plan görüntüsü: | Yok; arka plan görüntüsü: | hiçbiri | miras; arka plan görüntüsü: <фн-изображение> [ , <фн-изображение> ]*; <фн-изображение> = | Yok

Açıklama

Arka plan resmi özelliği (İngilizce "arka plan resmi" - "arka plan resmi" nden) bir elemanın arka plan resmini 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, renk görüntünün şeffaf kısımlarında görünür olacaktır).

Kullanım Şartları

CSS3 ile başlayarak (virgülle ayrılmış olarak), aynı anda birden fazla arka plan resmi belirtebilirsiniz. Bu, alt arka plan görüntülerini, üst arka plan görüntülerinin şeffaf alanlarından görünür hale getirecektir.

JavaScript

[nesne] .style .backgroundImage \u003d "[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 görüntüsü olmadığını gösterir. url ( ) "Url (...)" içindeki resim URI dizesini belirtir.

arkaplan resmi: url (myImage.png);

URL (" ")" Url (...) "içinde bir resim URI dizesi belirtir ve URI dizisi ÇİFT KİŞİSEL" "" karakterleriyle gösterilir.

background-image: url ("myImage.png");

Devral Öğenin, üst öğenin parametrelerini devralması gerektiğini belirtir.

Başlangıç \u200b\u200bdeğeri: "Yok".

Kullanım örneği

Kod Listeleme

Arka plan görüntüsü

Birden çok arka plan görüntüsü içeren belge.

> Arka plan resmi özelliği>

Web sitesi tasarımı bir arka planla başlar.

Arka plan rengini - özelliği kaydetmek doğru olacaktır arka plan rengi, bir güvenlik ağı için, eğer resim yüklenmezse. Parantez içinde url () resimlerin bulunduğu klasörün yolunu belirtin.

Varsayılan olarak, görüntü, tarayıcı ekranının tamamını doldurana kadar kendisini bir "döşeme" gibi tekrarlayacaktır, biz sayfada aşağı doğru hareket ettikçe, "döşememiz", sayfa içeriği bittiği sürece hem ikinci ekranı hem de üçüncüyü dolduracaktır. Açıktır ki böyle bir sonuç tasarım düşüncesinin zirvesi değil ve bir "banyomuz" olmayacak, sadece okunabilirliğin çok önemli olduğu bir bloga sahip olacağız.

"Döşemeden" kurtulmanın basit bir yolu, tüm ekranı kaplaması için en az 1024 piksel genişliğinde büyük bir görüntü kullanmaktır. Kesintisiz bir doku bulmak da iyi bir çözüm olacak, çoğaltıldığında resim bir bütün olacak.

Arka planı nasıl daha çekici hale getirebilirim?

Tanrıya şükür bunun için yardımcılarımız var:

• tekrar yok - tekrarı devre dışı bırak
• tekrar-x - kalıbı sadece yatay olarak tekrarlamak
• tekrar et - 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ülkiyettir 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, yalnızca site için bir dekorasyon görevi görüyor.

Başlık

Belirli bir konumlandırmaya sahip tekrar etmeyen bir arka plan örneği.

Resim yalnızca bir kez görüntülenir ve sağda yer alır.

Metnin arka planla çarpışmasını önlemek için sağ kenardan girinti 200 piksele ayarlanmıştır.

Ekranda aşağı kaydırılırken resmin her zaman görünür olmasını istiyorsak, özelliği yukarıdaki koda eklememiz gerekir - arka plan eki: sabit;

Arasındaki fark nedir img ve arka plan görüntüsü?

Fark esastır, etiket img doğrudan vücuda yerleştirilir HTML-sayfa ve içerikten sorumludur (resimler, fotoğraflar, avatarlar), anlamsal bir yük taşır. Görselin arama motorları tarafından indekslenmesi ve arama sonuçlarına girmesi çok önemlidir. Özellikleri CSS arka plan resmi - siteyi benzersiz ve güzel hale getirin, yani harici bir dosyaya alınması gereken bu tasarım CSS bir öğenin içinde stiller veya kullanım stil.

Tabii ki bu şu anlama gelmez arka plan görüntüsü vücuda koyulursa çalışmaz HTMLsayfalar. Ancak, tasarımla ilgili her şeyin CSS... Sonuç olarak, temiz HTML- kod:

• bu, sitenin dizine eklenmesinde olumlu bir etkiye sahip olacaktır; arama botları sitenizi sevecek ve daha sık ziyaret edecektir.
• 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 bulursunuz.

Mülkü kullanarak aşağı yukarı tüm seçenekleri değerlendirdik CSS arka plan resmi... Daha fazla pratik arkadaş! Kodu kopyalayıp kendi seçeneklerinizle gelmekten çekinmeyin!