daha kolay ve mantıklı hale gelmiştir: tüm sonra, artık daha nadiren JavaScript başvurmadan, esnek bir nesne yapılandırmak için yapabilirsiniz.En arka saydamlığını ayarlamak gerekir diyelim - CSS hemen çeşitli seçenekler sunar.Özellikleri (arka plan görüntüsü, arka plan-konumu, arka plan-boyutu, arka plan tekrar, arka plan bağlanma, arka plan menşeli, arka plan-klip, arka plan rengi) 'in bir grubu tarafından belirlenir
arka her biri tek başına reçete edilebilir veyaAynı nitelik arka altında birleştirmek için.Bize daha ayrıntılı Bunların her inceleyelim.
BB'de background-color
nitelik, arka plan rengi çeşitli şekillerde ayarlanabilir: onaltılık kod, renk adını veya RGB-girişini kullanarak.CSS3 olarak yerine RGBA ile RGB-kayıt seçeneği kullanmak mümkün hale geldi.Background-color: # FFDAB9
onaltılık renk kodu kafes sonra özelliğinde yazılmıştır.Çift karakterler böyle bir kayıt eşleşirse, kodu genellikle küçük bir kesim: # CCFF00 # cf0 olarak yazılabilir:
vücut {background-color: # cf0;}.Hatta en egzotik renklerde adı var
.
vücudu {: mor background-color:;} Örneğin, standart kırmızı ve beyaz ek olarak, size NavajoWhite (#FFDEAD) ya da Honeydew2 (# E0EEE0) kullanabilirsiniz.
son seçenek RGB veya RGBA kaydı rengi değil, aynı zamanda arka plan CSS şeffaflığı, ancak IE 9 sadece eski sürümleri çalışmak için bir yol sadece belirlemenizi sağlar.Diğer tarayıcılar şeffaflık normal varyant tanır.W3C standartlarına göre yerine daha normal RGB aynı RGBA kullanılması tercih edilir.RGBA at
son değer 1 (opak) arka plan saydamlığını ve 0 (saydam) den ayarlar.
bazı olağandışı değerler vardır
.Arka plan rengini HSL ve HSLA kullanılarak belirtilebilir.Hem CSS3 halinde eklenmiş ve bu nedenle IE sürüm 9 veya daha yüksek desteklenmeyen., Hafiflik (hafiflik - (yüzde olarak renk yoğunluğu, 0'dan 100'e kadar doygunluk) - parlaklık, bombalamak parametre benzer ölçülen, doyur - Hue (renk tekerleği üzerinde değer derece verilir ton): Seçenekler sadece farklı bir formatta, RGB veya RGBA aynıdır).Görüntünün kullanımı -
background-image
şeffaf bir arka plan en çapraz tarayıcı sürümü bağlıyor.CSS3, hatta daha fazla görüntü belirtebilirsiniz, bu bir virgül aracılığıyla yapılır.Örnek:
vücut {background-image: url (bg1.png), url (bg2.png)}.
bu daha IE8'i desteklemektedir.Kauçuğun düzeninde kullanılan arka plan gibi çeşitli görüntüler.Önemlisi, CSS arka plan rengi ayarlandığı gibi kullanıcıların basitçe bir resim yükleyebilirsiniz çünkü, herhangi bir resmi kullanmak için unutma.Arka plan bloğu tanımlamak için bir resim kullanırsanız
background-position
nitelik, CSS ekranda herhangi bir yere görüntüyü konumlandırmak için izin verir.Varsayılan olarak, görüntü sol üst köşesinde yer almaktadır.Herhangi bir sözlü yönergeleri kabul Öznitelik (üst, alt, sağ, sol), ya da (faiz, pikseller ve diğer birimler) Sayısal.{: Sağ orta background-pozisyonunda;} - Bu örnekte, arka plan görüntü mesafenin üst ve alt ile, sayfanın sağ tarafında aynı yer alacak
vücudun: Yatay ve dikey iki değerlerini belirtmek gereklidir.
background-size
Bazen arka plan germek ya da boyutunu azaltmak için CSS kullanmanız gerekir bağlıyorlar.Bu amaçla, özelliği arka plan boyutu ve boyut arka plan pikseller veya yüzde, ya da herhangi bir başka ölçüm biriminde tanımlanabilir.Eğer bir önek kullanmanız gerekir eski tarayıcılarda bir arka plan doğru görüntülenmesi için:
Bu özelliği ile, bazı sorunlar var.Tabii ki, şu anki sürümleri tamamen bu niteliği ve spesifik özellikleri kayboldu ihtiyacını desteklemektedir.
kaydırma yaparken background-attachment
Bu nitelik arka plan görüntüsü davranışını belirler bağlıyoruz.Örneğin, (bu makaledeki tüm niteliklerin toplam, miras hariç) 3 değerleri alabilir:
- sabit - Sabit arka plan üzerinde resim yapar;
- kaydırma - elementlerin geri kalanı ile arka plan kaydırıldığını;
- yerel - kaydırma içeriği ise arka planda görüntü kayar.Içerik ötesinde Arkaplan sabittir.Kullanım
Örnek:
gövdesi {arka-bağlanma sabit}.
Şu anda, Firefox son özelliği (yerel) desteklemiyor.
Bu nitelik elemanın konumlandırılması için sorumlu olan arka plan kökenli
bağlıyorlar.Tarayıcılar önceki sürümlerinde önek kullanılmasını gerektirir.Dikkate çerçeve kalınlığını çekerken, arka kenarından
- padding-box pozisyonları;: Özelliği üç parametre vardırBu önceki farklı
- border-box özellikleri sınır çizgisi tamamen olabilir veya kısmen arka kapak olabilir;
- içerik kutusu konumlandırma görüntü içeriği pryavyazyvaya.Eğer birden fazla değer belirtirseniz
, tarayıcı kendi yöntemleriyle tepki verebilir: Firefox ve Opera sadece ilk seçeneği kabul edin.
arka plan görüntüsü belirtilmişse, bu yatay veya dikey olarak tekrar edilmelidir, bir kural olarak
background-tekrar bağlıyor.Bunun için ve nitelik background-repeat kullanılır.Böylece, blok arka plan, böyle bir özellik içerir CSS birkaç seçenekten biri olabilir:
- no-repeat - resim, tek bir formda sayfada görünür;
- tekrar - x ve y tekrarlanan desen;
- tekrar-x - sadece yatay;
- tekrar-y - yalnızca dikey;
- uzay - desen tekrarlar, ancak uzay değil dolu ise, o zaman resim arasındaki boşluklar vardır;
- yuvarlak - bu tüm alanı tüm resmi doldurmak yoksa görüntü ölçeklenir.Niteliğin
Örnek:
vücut {background-repeat: no-repeat tekrar} - benzer background-repeat: repeat-y.Transfer parametreleri virgülle ayırarak eğer CSS3 yılında
birden fazla görüntü için değerleri belirtebilirsiniz.
Bu özellik (noktalı kare halinde, örneğin) sınırlarının altında arka plan davranışını belirler arka klip
öznitelik:
- doldurma kutusu - bloğun iç görüntülenen arka planı;
- sınır kutusunun - görüntü kapsamında gelir;
- içerik-box - arka planda resim sadece içerik içinde görünür.Kullanım
Örnek:
vücut {background-klip: içerik-box;}.
Krom Safari öneki -webkit- kullanılmasını gerektirir.CSS özelliği tüm tarayıcılarda çalışacak -
donukluk niteliği ve
donukluk niteliği filtre arka plan saydamlığını ayarlamanızı sağlar.Değer 0.0 ile dahil 1.0 ayarlanabilir.
.block {background-image: Bu grubu yerine 0.3 bir tamsayı değeri olmayan arka plan CSS şeffaflığını ayarlayabilirsiniz 0,3 yazmak için yeterli url (img.png);donukluk: 0,3;}.
, CSS, hatta dokuzuncu sürümü altında IE için uygundur arka plan saydamlığı ayarlamak nitelik filtre kullanmak için:
.block {background-image: url (img.png);Filtre: alfa (opaklık = 30);}.
Bu durumda, donukluk donukluk farklı saydamlık RGBA kalıtım yoluyla nitelik ayarlarını olduğu 0 ile 100 Not arasında yer almaktadır: saydam bir arka plan kullanarak donukluk değil sadece, aynı zamanda birimin içinde tüm öğeleri.
daima BDT ve diğer tüm ülkelerin tarayıcı kullanım istatistiklerini emin olun.Tüm DTP en büyük sorun - IE eski sürümleri, onlar CSS3 tam kullanımı izin vermez.Düzen tarayıcınız bir özellik CSS olup olmadığını kontrol özel servisleri kullanmak unutmayın edin.Tarayıcılar eski sürümlerini yüklemek yapamıyorsanız, online farklı tarayıcılarda sitenin işleyişini denetler hizmet olsun.
