Background-origin özelliği ile belirlemiş olduğumuz arkaplanın başlangıç noktasını ve background-clip ile’de belirlemiş olduğumuz arkaplanın kesim noktasını belirtmiş oluyoruz. makalenin devamında bol örnekler ile anlatmaya çalıştım.
CSS background-origin ve background-clip özelliklerinin kullanımı
background-origin
1 | background:url(adres) 0 0 no-repeat |
Üstteki örnek kodumuzda background özelliğinin left(sol) ve top(üst) özelliklerinin başlangıç değerlerine 0 verdik böylelikle background-origin özelliğinin varsayılan olarak başlangıç noktası aşağıdaki kırmızı noktadada görüldüğü gibi padding alanının 0 noktasından başlayacaktır resmin gösterimi.
HTML
1 2 3 | <div class="box"> <span> </span> </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .box{ background:url(http://i691.photobucket.com/albums/vv273/muratoner/8878114654_8df9cf6d45_c.jpg) no-repeat; width:200px; height:200px; border:solid 20px rgba(0,0,0,0.5); padding:20px; float:left; margin-right:15px; box-sizing:border-box; } .box span{ color:#000; display:block; font-size:30px; font-weight:bold; height:100%; text-transform:uppercase; background-color:rgba(256,256,256,0.5) } |
Sonuç
background-origin özelliğini kısaca açıklamak gerekirse resmin basılma noktasını belirtmekteyiz resmin varsayılan olarka basılma noktası üstteki resimdede kırmızı nokta ile belittiğimiz gibi padding özelliğinin 0 noktasıdır 3 farklı şekilde başlangıç noktasını değiştirebilirsiniz bunlar border-box, padding-box(default), content-box değerleridir. şimdi bu değerlerin sonuçlarını alttaki resimden görelim.
HTML
1 2 3 4 5 6 7 8 9 10 11 | <div class="box box1"> <span> </span> </div> <div class="box box2"> <span> </span> </div> <div class="box box3"> <span> </span> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .box{ background:url(http://i691.photobucket.com/albums/vv273/muratoner/8878114654_8df9cf6d45_c.jpg) no-repeat; width:200px; height:200px; border:solid 20px rgba(0,0,0,0.5); padding:20px; float:left; margin-right:15px; box-sizing:border-box; } .box span{ color:#000; display:block; font-size:30px; font-weight:bold; height:100%; text-transform:uppercase; background-color:rgba(256,256,256,0.5) } |
Sonuç
background-clip
background-clip özelliğinin aldığı değerler backgroun-origin’deki gibidir fakat farklı işlevlere sahiptir her iki özellikte background-clip ile belirlediğimiz başlangıç noktası dışında kalan kısımlar kesilir örneğin padding-box denildiğinde padding ve content aralığı dışında kalan border-box ve onunda dışında kalan resmin taşan kısımları kırpılır.
şimdi konuyu daha iyi anlamak adına bir örnek yapalım.
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <div class="box box1"> <span></span> </div> <div class="box box2"> <span></span> </div> <div class="box box3"> <span></span> </div> <div class="box box1 cover" style="clear:both;"> <span></span> </div> <div class="box box2 cover"> <span></span> </div> <div class="box box3 cover"> <span></span> </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | .box{ background:url(http://i691.photobucket.com/albums/vv273/muratoner/8878114654_8df9cf6d45_c.jpg) center center; width:200px; height:200px; border:solid 15px rgba(0,0,0,0.5); padding:15px; float:left; margin-right:15px; margin-bottom:15px; box-sizing:border-box; } .box span{ color:#000; display:block; font-size:30px; font-weight:bold; height:100%; text-transform:uppercase; background-color:rgba(256,256,256,0.5) } .box1{ background-clip:border-box; background-origin:border-box; } .box2{ background-clip:padding-box; background-origin:padding-box; } .box3{ background-clip:content-box; background-origin:content-box; } .cover{ background-size:cover; margin-top:10px; } |
Sonuç
Üstteki örneğimizde dikkatinizi çekmek istediğim bazı ayrıntılar var ilk sonuç kısmındanda görebileceğiniz gibi ilk satırdaki görsellerde resmin sürekli ortalandığını görürsünüz bunun nedeni ise backgroun özelliğinin top ve left özelliklerine değer olarak center(ortala) değeri geçilmiştir böylelikle resim content-box, padding-box ve border-box’dada ortalanmış olarak gözükmüştür 2.satırda ise background-size özelliğine cover değeri verilerek görsel content-box, padding-box ve border-box değerleri verilmiş div elementine sığdırılmıştır.
Tarayıcı Desteği
IE9 ve üstü ve diğer tüm popüler tarayıcılarda sorunsuz çalışmaktadır.
