CSS arka plan eki Özellik
Örnek
Sayfayla birlikte kaymayan bir arka plan resmi (düzeltildi):
body {
background-image: url("img_tree.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
Özellik background-attachment
, bir arka plan görüntüsünün sayfanın geri kalanıyla birlikte kaydırılıp kaydırılmayacağını veya sabitlenip görüntülenmeyeceğini ayarlar.
Varsayılan değer: | taslak |
---|---|
Miras: | Hayır |
canlandırılabilir: | Hayır. Canlandırılabilir hakkında bilgi edinin |
Sürüm: | CSS1 |
JavaScript sözdizimi: | nesne .style.backgroundAttachment="sabit" |
Tarayıcı Desteği
Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
Property | |||||
---|---|---|---|---|---|
background-attachment | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
CSS Sözdizimi
background-attachment: scroll|fixed|local|initial|inherit;
Mülk değerleri
Value | Description |
---|---|
scroll | The background image will scroll with the page. This is default |
fixed | The background image will not scroll with the page |
local | The background image will scroll with the element's contents |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Daha fazla örnek
Örnek
Sayfayla birlikte kayan bir arka plan görüntüsü (kaydırma). Bu varsayılandır:
body {
background-image: url("img_tree.gif");
background-repeat: no-repeat;
background-attachment: scroll;
}
Örnek
Basit bir paralaks kaydırma efekti nasıl oluşturulur (3B derinlik yanılsaması yaratın):
.fixed-bg {
/* The background image */
background-image: url("img_tree.gif");
/* Set a specified height, or the minimum height for the background image */
min-height: 500px;
/* Set background image to fixed (don't scroll along with the page) */
background-attachment: fixed;
/* Center the background image */
background-position: center;
/* Set the background image to no repeat */
background-repeat: no-repeat;
/* Scale the background image to be as large as possible */
background-size: cover;
}
İlgili Sayfalar
CSS eğitimi: CSS Arka Planı
HTML DOM referansı: backgroundAttachment özelliği