SORU
23 EKİM 2011, Pazar


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
23 EKİM 2011, Pazar


  1. Senin jsfiddle background-image yerine background kullanın
  2. "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.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • GoProTutorials

    GoProTutoria

    18 NİSAN 2011
  • RickardRick

    RickardRick

    9 Mart 2007
  • TheSalband Rai

    TheSalband R

    11 NİSAN 2011