CSS3 Arka Plan
CSS3 arka plan elemanının daha fazla kontrol sağlayan birkaç yeni arkaplan özelliklerini içerir.
Bu bölümde tek öğeye birden fazla arka plan resimleri eklemek için öğreneceksiniz.
Ayrıca aşağıdaki yeni CSS3 özellikleri hakkında öğreneceksiniz:
-
background-size -
background-origin -
background-clip
Tarayıcı Desteği
Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.
Sayılar ardından -webkit-, -moz- veya -o- bir önek ile çalıştığım ilk versiyonunu belirtin.
| özellik | |||||
|---|---|---|---|---|---|
| background-image (with multiple backgrounds) |
4.0 | 9.0 | 3.6 | 3.1 | 11.5 |
| background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
| background-origin | 1.0 | 9.0 | 4.0 | 3.0 | 10.5 |
| background-clip | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
CSS3 Çoklu arka planlar
CSS3 Eğer aracılığıyla, bir element için birden arka plan resimleri eklemenizi sağlar background-image özelliği.
farklı bir arka plan görüntüleri virgülle ayrılmış ve görüntüler ilk görüntü izleyiciye yakın olduğu, üst üste dizilir.
Aşağıdaki örnek ilk görüntü bir çiçektir, iki arka plan görüntüleri vardır (aligned to the bottom and right) ve ikinci görüntü kağıt arka plan (aligned to the top-left corner) :
Örnek
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
} Kendin dene " Çoklu arka plan resimleri ayrı ayrı arka özellikleri kullanılarak belirlenebilir (as above) ya da background kestirme özelliği.
Aşağıdaki örnek, background (yukarıdaki örnekte olduğu gibi aynı sonucu) kestirme özelliği:
Örnek
#example1 {
background: url(img_flwr.gif) right bottom
no-repeat, url(paper.gif) left top repeat;
} Kendin dene " CSS3 Arkaplan Boyutu
CSS3 background-size özelliği arka plan resimleri boyutunu belirlemenizi sağlar.
CSS3 önce, bir arka plan görüntüsü boyutu görüntünün gerçek boyutu oldu. CSS3 farklı bağlamlarda yeniden kullanım arka plan resimleri olanağı sunar.
boyut uzunlukları belirtilebilir, ya da iki anahtar kelime birini kullanarak yüzdeleri: içeren veya kapak.
Aşağıdaki örnek, orijinal görüntüden daha küçük bir arka plan resmi yeniden boyutlandırılır (using pixels) :
Orijinal arka plan görüntüsü:
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Olarak boyutu arka plan görüntüsü:
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
İşte kod:
Örnek
#div1
{
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
Kendin dene " Diğer iki olası değerleri background-size olan contain ve cover .
contain kelime mümkün olduğu kadar büyük olacak şekilde arka plan görüntüsü terazi (but both its width and its height must fit inside the content area) . Bu şekilde, arka plan görüntüsü ve arka plan konumlandırma alanı oranları ile ilgili olarak, arka plan görüntüsü kapsamında değildir arka bazı alanlar olabilir.
cover içerik alan tamamen (genişliği ve yüksekliği iki eşit ya da içerik alanını aşan) arka plan resmi ile kaplanır, böylece anahtar arka plan görüntüsü ölçekler. Bu şekilde, arka plan görüntüsü bazı bölümleri arka yerleştirme alanında görünmeyebilir.
Aşağıdaki örnek kullanımını göstermektedir contain ve cover :
Örnek
#div1
{
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2
{
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
Kendin dene " Çoklu Arkaplan Görüntüler Boyutları tanımlayın
background-size özelliği de arka boyutu için birden fazla değer kabul (using a comma-separated list) birden çok arka çalışırken.
Aşağıdaki örnek, üç arka plan görüntüleri, farklı olan, belirtmişse background-size her bir görüntü için Değeri:
Örnek
#example1 {
background: url(img_flwr.gif) left top
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top
repeat;
background-size: 50px, 130px, auto;
} Kendin dene " Tam Boy Arka Plan Resmi
Şimdi her zaman tüm tarayıcı penceresini kaplayan bir web sitesinde bir arka plan görüntüsü olmasını istiyorum.
şartlar aşağıda belirtilmiştir:
- Görüntü ile tüm sayfayı doldurun (no white space)
- Ölçek görüntü gerektiği gibi
- sayfadaki Merkezi görüntü
- kaydırma çubukları neden etmeyin
Aşağıdaki örnek bunu nasıl gösterir; Html elemanını kullanın (the html element is always at least the height of the browser window) . Sonra üzerine sabit ve ortalanmış arka plan olarak ayarlayın. Sonra onun boyutunu ayarlamak background-size özelliği:
Örnek
html {
background: url(img_flower.jpg) no-repeat
center fixed;
background-size: cover;
} Kendin dene " CSS3 background-origin Mülkiyet
CSS3 background-origin arka plan görüntüsü konumlandırılacağı yeri özellik belirtir.
mülkiyet üç farklı değerler alır:
- border-box - arka plan görüntüsü sınırın sol üst köşesinden başlar
- padding-box - (default) arka plan görüntüsü dolgu kenarının üst sol köşesine başlar
- content-box - arka plan görüntüsü içeriğinin sol üst köşesinden başlar
Aşağıdaki örnek göstermektedir background-origin özelliğini:
Örnek
#example1
{
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
Kendin dene " CSS3 background-clip Mülkiyet
CSS3 background-clip mülkiyet arka plan boyama alanını belirler.
mülkiyet üç farklı değerler alır:
- border-box - (default) arkaplan sınırın dış kenarına doğru boyanmıştır
- padding-box - arka dolgu dış kenarına doğru boyanmıştır
- content-box - arkaplan içerik kutusu içinde boyanmıştır
Aşağıdaki örnek, background-clip özelliği:
Örnek
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
Kendin dene " Egzersizleri ile Yourself test edin!
Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Egzersiz 4» Egzersiz 5 »
CSS3 Arkaplan Özellikleri
| özellik | Açıklama |
|---|---|
| background | tek bildiriminde tüm arka plan özelliklerini ayarlamak için bir stenografi özelliği |
| background-clip | arka plan boyama alanını belirler |
| background-image | Bir element için bir veya daha fazla arka plan resimleri belirtir |
| background-origin | Arka plan burada belirtir image(s) / konumlandırılmış olan |
| background-size | Belirtir arka plan boyutu image(s) |