arka plan-arka plan boyutu kestirme özelliği (CSS3)
background-image
background-size
background
eksik bir özellik özellikleri karıştırmak için çalışıyorum. W3C documentation background-size
dayalı background-position
sonra gelmeli özelliği, bir eğik çizgi(/
) ile ayrılmış.
W3C örnek:
p { background: url("chess.png") 40% / 10em gray round fixed border-box; }
eşittir:
p { background-color: gray; background-position: 40% 50%; background-size: 10em 10em; background-repeat: round round; background-clip: border-box; background-origin: border-box; background-attachment: fixed; background-image: url(chess.png) }
MDN aynı şeyi söylüyor. Ben de this this steno CSS3 arka plan özelliği bu açıklama hakkında makale bulunamadı.
Ama bu işe yaramıyor! Bunu da değildir belli nasıl bir steno background
emlak background-size
background-position
iki farklı değerleri için background-position-x
background-position-y
ya da aynı şey için background-size
. Eğik çizgi(/
) nasıl yapıldığı belli değil? This example benim Chrome 15 çalışmıyor.
Bir özet yapmaya çalıştım örnek, bu CSS kod:
div {
background: url(http://www.placedog.com/125/125)
0 0 / 150px 100px
repeat no-repeat
fixed border-box padding-box blue;
height: 300px;
width:360px;
border: 10px dashed magenta;
}
Temiz bir örnek
Bu çalışıyor(JSFiddle)
body{
background-image:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png);
background-position:200px 100px;
background-size:600px 400px;
background-repeat:no-repeat;
}
Bu işe yaramıyor(jsfiddle)
body{
background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 200px 100px/600px 400px no-repeat;
}
Bu da çalışmıyor(jsfiddle)
body{
background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 200px/400px 100px/600px no-repeat;
}
CEVAP
- Senin jsfiddle
background-image
yerinebackground
kullanın - "Bu tarayıcı tarafından desteklenmiyor henüz" diye. bir durum gibi görünüyor
Opera bu iş : http://jsfiddle.net/ZNsbU/5/
Ama bakmıyor ff5 ne de ıe8 iş. (outdatted tarayıcı Yaşasın :D )
Kod :
body{
background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 400px 200px / 600px 400px no-repeat;
}
Bu şekilde yapabilirsin :
body{
background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 400px 400px no-repeat;
background-size:20px 20px
}
Ff5, opera ama ıe8 çalışmak.
Mavi arka plan seçimi önlemek için G/Ç...
Bir arka plan görüntüsü birleştirin ve...
Nasıl arka plan boyutu YANİ iş yapabil...
CSS3 degrade arka plan vücut değil...
Arka plan-renk CSS3 geçiş...