Benim var.
body {
background: url(images/background.svg);
}
İstenen etki, bu arka plan görüntüsünün genişliğinin sayfanın genişliğine eşit olması, yüksekliğinin ise orantıyı korumak için değişmesidir. örneğin, orijinal görüntü 100*200 (herhangi bir birim) ve gövde 600 piksel genişliğindeyse, arka plan görüntüsü 1200 piksel yüksekliğinde olmalıdır. Pencere yeniden boyutlandırıldığında yükseklik otomatik olarak değişmelidir. Bu mümkün mü?
Şu anda Firefox, yüksekliği sığdırıyor ve ardından genişliği ayarlıyor gibi görünüyor. Bunun nedeni yüksekliğin en uzun boyut olması ve kırpmayı önlemeye çalışması olabilir mi? Dikey olarak kırpmak ve sonra kaydırmak istiyorum: yatay tekrar yok.
Ayrıca, Chrome, background-repeat:repeat
açıkça verildiğinde bile (ki bu zaten varsayılandır) görüntüyü tekrarlamadan ortaya yerleştiriyor.
Bunun için bir CSS3 özelliği vardır, yani background-size
(uyumluluk kontrolü). Biri uzunluk değerlerini ayarlayabilse de, genellikle contain
ve cover
özel değerleriyle birlikte kullanılır. Sizin özel durumunuzda cover
kullanmalısınız:
body {
background-image: url(images/background.svg);
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center; /* optional, center the image */
}
contain
ve cover
için yumurtlamaKötü kelime oyunu için özür dilerim, ama göstermek için Biswarup Ganguly'den günün resmi kullanacağım. Diyelim ki bu sizin ekranınız ve gri alan görünür ekranınızın dışında. Gösterim için 16x9 oranını varsayacağım.
Yukarıda bahsi geçen günün resmini arka plan olarak kullanmak istiyoruz. Ancak, bazı nedenlerden dolayı resmi 4x3 olarak kırptık. Background-sizeözelliğini sabit bir uzunluğa ayarlayabiliriz, ancak biz
containve
coverözelliklerine odaklanacağız. Ayrıca
body` özelliğinin genişliğini ve/veya yüksekliğini değiştirmediğimizi varsaydığımı da unutmayın.
contain
içerir Görüntüyü, (varsa) kendine özgü en boy oranını koruyarak, hem genişliği hem de yüksekliği arka plan konumlandırma alanına sığabilecek en büyük boyuta ölçeklendirin.
Bu, arka plan görüntüsünün her zaman arka plan konumlandırma alanında tamamen yer almasını sağlar, ancak bu durumda background-color
ile doldurulmuş bir miktar boş alan olabilir:
cover
kapak Görüntüyü, kendine özgü en boy oranını (varsa) koruyarak, hem genişliği hem de yüksekliği arka plan konumlandırma alanını tamamen kaplayabilecek en küçük boyuta ölçeklendirin.
Bu, arka plan görüntüsünün her şeyi kapladığından emin olmanızı sağlar. Görünür bir `arka plan rengi' olmayacaktır, ancak ekran oranına bağlı olarak resminizin büyük bir kısmı kesilebilir:
div > div {
background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
background-repeat: no-repeat;
background-position: center center;
background-color: #ccc;
border: 1px solid;
width: 20em;
height: 10em;
}
div.contain {
background-size: contain;
}
div.cover {
background-size: cover;
}
/********************************************
Additional styles for the explanation boxes
*********************************************/
div > div {
margin: 0 1ex 1ex 0;
float: left;
}
div + div {
clear: both;
border-top: 1px dashed silver;
padding-top:1ex;
}
div > div::after {
background-color: #000;
color: #fefefe;
margin: 1ex;
padding: 1ex;
opacity: 0.8;
display: block;
width: 10ex;
font-size: 0.7em;
content: attr(class);
}
<div>
<div class="contain"></div>
<p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
</p>
</div>
<div>
<div class="cover"></div>
<p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code><div></code>.</p>
</div>
https://developer.mozilla.org/en-US/docs/CSS/background-size adresindeki ipuçlarına dayanarak, benim için işe yarayan aşağıdaki tarifi buldum
body {
overflow-y: hidden ! important;
overflow-x: hidden ! important;
background-color: #f8f8f8;
background-image: url('index.png');
/*background-size: cover;*/
background-size: contain;
background-repeat: no-repeat;
background-position: right;
}
Tam olarak ne aradığınızdan emin değilim, ancak CSS-Tricks'ten Chris Coyier tarafından yazılan bu mükemmel blog yazılarına gerçekten göz atmalısınız:
http://css-tricks.com/how-to-resizeable-background-image/
http://css-tricks.com/perfect-full-page-background-image/
Her bir makalenin açıklamalarını okuyun ve aradığınız şey olup olmadıklarına bakın.
İlki aşağıdaki soruyu yanıtlamaktadır:
Arka plan resmini yeniden boyutlandırılabilir yapmanın bir yolu var mı? Tarayıcı penceresinin boyutu ne olursa olsun, bir web sayfasının arka planını bir resimle uçtan uca doldurmak gibi. Ayrıca, tarayıcı penceresi değiştikçe daha büyük veya daha küçük olarak yeniden boyutlandırın. Ayrıca, oranını koruduğundan (garip bir şekilde esnemediğinden) emin olun. Ayrıca, kaydırma çubuklarına neden olmaz, sadece gerekirse dikey olarak keser. Ayrıca, sayfada satır içi etiketi olarak gelir.
İkinci yazının amacı, bir web sitesinde her zaman tarayıcı penceresinin tamamını kaplayan bir "arka plan görüntüsü elde etmektir. "
Umarım bu yardımcı olur.