CSS arkaplan şeffaflık. CSS ile Şeffaf arkaplan veya metin

CSS3 web tasarımcıları gelişiyle birlikte birçok yönden çalışmak daha kolay ve daha mantıklı hale gelmiştir: Sonuçta, artık gerçekten esnek az sıklıkla JavaScript başvurmadan, herhangi bir nesne özelleştirebilirsiniz. Diyelim ki arka şeffaflığını ayarlamak gerekir diyelim - CSS hemen çeşitli seçenekler sunar.

niteliklerin bir grubu tarafından belirlenir Arka plan (arka plan görüntüsü, arka plan-konumu , arka plan boyutlu, arka plan tekrar, arka-bağlanma, arka plan kökenli, arka plan-klip, arka plan rengi), özelliği kapsamında ayrı ayrı atanmış veya kombine edilebilir, her biri arka plan. bize ayrıntılı olarak bunların her inceleyelim.

Arka planının rengini Özellik

CSS olarak, arka plan rengi onaltılık kodu, renk adı veya RGB girişli kullanarak: birkaç şekilde ayarlanabilir. CSS3 almak yerine RGBA ile RGB-kayıt seçeneği kullanmak mümkün hale geldi.

background-color: # FFDAB9 Hex renk kodu kafeste sonra özelliğinde kaydedilir. Bu giriş karakterler aynı çiftleri vardır, kod genellikle küçük bir kesik olduğunu: # CCFF00 # cf0 olarak yazılabilir:

Vücut {arka plan rengi: # cf0 ;}.

adı bile en egzotik renklerde vardır. Örneğin, standart kırmızı ve NavajoWhite (#FFDEAD) ya da Honeydew2 (# E0EEE0) kullanabilir beyaz ek olarak:

Vücut {arka plan rengi: mor; }.

İkinci seçenek RGB veya RGBA giriş rengi değil aynı zamanda CSS arka plan saydamlığını sadece belirlemenizi sağlar, ancak yöntem yalnızca 9 daha eski IE sürümlerinde çalışır. Diğer tarayıcılar şeffaflık normal versiyonunu tanır. W3C standartlarına göre hala yerine daha zamanki RGB RGBA kullanılması tercih edilir.

RGBA arka son değer ve 1 (opak), 0 (saydam) opaklığı ayarlar.

bazı sıradışı değer vardır. arka plan rengini HSL ve HSLA kullanılarak ayarlanabilir. Hem CSS3 ilave edildi ve bu nedenle IE sürüm 9 veya daha yüksek desteklenmez. Düzenlemeler, sadece farklı bir biçimde aynı RGB veya RGBA: Renk (gölge - derece olarak verilmektedir renk çarkı üzerinde bir değere), doyur (satürasyon - 0 ile 100 arasında bir yüzde olarak, renk yoğunluğu,), Açıklık (açıklık - parlaklık, doymuş bir parametre de benzer biçimde ölçüldüğü ).

Arka plan resmi Özellik

şeffaf arka plan çoğu çapraz tarayıcı sürümü - Bu resim kullanılmasıdır. CSS3, hatta fazla görüntü ayarlayabilirsiniz, bu virgül aracılığıyla yapılır. örnek:

{Arka vücut Resim URL (bg1.png), URL (bg2.png)}.

Hatta IE8 destekleyen Bu şekilde. Düzenlemede kullanılan kauçuk arka planda Çeşitli görüntüler. Önemli olan, kullanıcıların basitçe bir resim yükleyebilir gibi herhangi resim kullanmak ve CSS arka plan rengini ayarlamak unutmayın.

background-pozisyon Özellik

Eğer arka plan ünitesini ayarlamak için görüntü kullanırsanız, CSS ekranda herhangi bir yere görüntüyü konumlandırmak sağlar. Varsayılan olarak, görüntü sol üst köşede yer alır. Özellik sözlü talimatlar (üst, alt, sağ, sol), sayısal (ilgi, piksel ve diğer birimleri) ya sürer. Bu durumda, yatay ve dikey iki değeri belirtmek gerekir:

Vücut {arka-konumu: sağ orta ;} - bu örnekte, bir desen aynı görüntü mesafesinin üst ve alt sağ tarafında yer alacaktır.

background-boyutu Özellik

Bazen CSS arka plan germek veya boyutunu azaltmak için gereklidir. Bunu yapmak için, nitelik background-boyutu ve piksel veya yüzde olarak ayarlanabilir arka boyutunu ve diğer birimleri kullanın.

Bu özelliği ile, bazı sorunlar vardır: tarayıcı önekleri önceki sürümlerinde bir arka plan doğru görünen kullanılacak için. Tabii ki, şu anki sürümü tamamen bu özelliği destekleyen ve spesifik özellikleri için ihtiyaç ortadan kayboldu.

background-eki Özellik

Bu nitelik kaydırma yaparken arka plan resimleri davranışını belirler. Yani, (inherit, bu makalede açıklanan özelliklerin tümü için toplam hariç) 3 değerleri alabilir:

• Sabit - Sabit arka planında resim yapar;
• kaydırmak - elementlerin geri kalanı ile arka plan parşömenlerini;
• Yerel - kaydırma içeriğe sahip olup olmadığını arka plan üzerinde görüntü kaydırılan. çerçevenin içeriğini ötesinde Arkaplan sabittir.

Kullanım örnekleri:

Vücut {arka-bağlanma sabit}.

Şu anda, Firefox son özelliği (yerel) desteklemez.

background-kökeni Özellik

Bu nitelik konumlandırma elemanı sorumludur. Erken tarayıcılar alan kodlarının kullanılmasını gerektirmektedir. Kendisi üç parametre vardır:

• dikkate çerçeve kalınlığının çekerken dolgu kutusu, kenar uzantısının göre konumlandırılmıştır;
• sınır çizgisi olabilir önceki farklı sınır kutusu özellikleri tamamen veya kısmen kalıbı üst üste;
• içerik kutusu yerleştirme görüntü içeriğini pryavyazyvaya.

Birden çok değer belirtiyorsa tarayıcılar kendi yöntemleriyle tepki verebilir: Firefox ve Opera sadece ilk seçeneği algılamaktadır.

background-repeat Özellik

arka plan resmi belirtilmişse Kural olarak, yatay veya dikey olarak tekrarlanmalıdır. Bunun için ve nitelik arkaplan tekrarı kullanılır. Böylece blok arka plan, böyle bir özellik içeren CSS birkaç parametrelerden birine sahip olabilir:

• yineleme yok - resim, tek sürümünde bir sayfada görünür;
• tekrar - arka plan x ve y tekrar edilir;
• tekrar-x - sadece yatay;
• tekrar-y - yalnızca dikey;
• space - arkaplan tekrarlanmış ancak uzay resimleri arasında doldurmak imkansız ise boş görünüyor edilir;
• Yuvarlak - bu bütün resimlerin tümünü dolduracak etmezse görüntü, ölçeklenir.

niteliklerin Örnek:

Vücut {arka-tekrar: no- tekrar tekrar} - benzer olan-tekrar: tekrar-y.

virgülle ayırarak parametreleri, sayarken CSS3 içinde birden fazla görüntü için değerleri belirleyebilir.

background-klip Özellik

Bu özellik, (noktalı kare halinde, örneğin) sınırlarının altında arka plan davranışını tanımlar:

• dolgu kutusu - bloğun iç Arkaplan;
• border-box - görüntü çerçevesi altında gelir;
• İçerik-box - zemin üzerine resim sadece içerik içinde görünür.

Kullanım örnekleri:

Vücut {arka-klip: içeriği- kutu;}.

Krom ve Safari -webkit- öneki gerektirir.

Opaklık nitelikleri ve filtre

CSS özelliği tüm tarayıcıları çalışacak - donukluk niteliği arka planda saydamlığını ayarlamanızı sağlar. değeri 0.0 ile dahil 1.0 aralığında yer almaktadır. Bu durumda, CSS arka plan saydamlığını ayarlayabilirsiniz Bunun yerine, 0.3 bir tamsayı değeri .3 yazmak için yeterlidir:

.block {plan görüntüsü: URL ( img.png); opaklık: .3;}.

Arka plan saydamlığını ayarlamak için CSS filtre özelliğini kullanın hatta dokuzuncu sürümü altında IE için uygundur:

.block {plan görüntüsü: URL ( img.png); Filtre: alfa (opaklık = 30)}.

opaklığını kullanarak belli değil sadece arka plan olur, ama aynı zamanda ünitenin içindeki tüm unsurlar zaman: Bu durumda, donukluk değeri donukluk RGBA miras yoluyla farklı saydamlık ayarlarını özniteliği 0 ile 100 Not arasında yer almaktadır.

Her zaman BDT tarayıcıları ve diğer tüm ülkeler için sizin kullanım istatistiklerini izlemek. Tüm DTP en büyük sorun - IE'nin eski sürümleri, onlar tam ölçüde CSS3 kullanmaya izin vermez. düzende Tarayıcınız herhangi bir CSS özelliği destekleyip desteklemediğini kontrol özel hizmetlerini kullanmak için unutma. Eğer tarayıcıların eski sürümleri yükleyemiyorsan, çevrimiçi çoklu tarayıcılarda sitesi çalışmasını kontrol edecek bir hizmeti bulmak.