CSS ile arka plan resminin boyutunu ayarlamak mümkün müdür?
Gibi bir şey yapmak istiyorum:
background: url('bg.gif') top repeat-y;
background-size: 490px;Ama öyle yapmak tamamen yanlış gibi görünüyor ...
Yanıtlar:
Görüntüyü büyütmeniz gerekiyorsa, görüntünün kendisini bir görüntü düzenleyicide düzenlemeniz gerekir.
İmg etiketini kullanırsanız, boyutu değiştirebilirsiniz, ancak görüntünün başka bir içerik için arka plan olması gerekiyorsa size istediğiniz sonucu vermez (ve istediğiniz gibi tekrarlanmayacaktır) ...
Bu, CSS3 ile yapmak mümkündür background-size.
Tüm modern tarayıcılar bunu destekler, bu nedenle eski tarayıcıları desteklemeniz gerekmedikçe, bunu yapmanın yolu budur.
Desteklenen tarayıcılar:
Mozilla Firefox 4.0+ (Gecko 2.0+), Microsoft Internet Explorer 9.0+, Opera 10.0+, Safari 4.1+ (webkit 532) ve Chrome 3.0+.
.stretch{
/* Will stretch to specified width/height */
background-size: 200px 150px;
}
.stretch-content{
/* Will stretch to width/height of element */
background-size: 100% 100%;
}
.resize-width{
/* width: 150px, height: auto to retain aspect ratio */
background-size: 150px Auto;
}
.resize-height{
/* height: 150px, width: auto to retain aspect ratio */
background-size: Auto 150px;
}
.resize-fill-and-clip{
/* Resize to fill and retain aspect ratio.
Will cause clipping if aspect ratio of box is different from image. */
background-size: cover;
}
.resize-best-fit{
/* Resize to best fit and retain aspect ratio.
Will cause gap if aspect ratio of box is different from image. */
background-size: contain;
}Özellikle, bize daha önce sahip olmadığımız yeni kontrol gücünü veren coverve containdeğerlerini seviyorum .
background-size: roundYineleme ile birlikte bir anlamı olan da kullanabilirsiniz :
.resize-best-fit-in-repeat{
/* Resize to best fit in a whole number of times in x-direction */
background-size: round auto; /* Height: auto is to keep aspect ratio */
background-repeat: repeat;
}Bu, görüntü genişliğini arka plan konumlandırma alanına tam olarak sığacak şekilde ayarlar.
Ek not
İhtiyacınız olan boyut statik piksel boyutundaysa, gerçek görüntüyü fiziksel olarak yeniden boyutlandırmak hala akıllıdır. Bu, hem yeniden boyutlandırma kalitesini (görüntü yazılımınızın tarayıcılardan daha iyi bir iş çıkardığı göz önüne alındığında) iyileştirmek hem de orijinal görüntü gösterilenden daha büyükse bant genişliğinden tasarruf etmek içindir.
Sadece CSS 3 bunu destekler,
background-size: 200px 50px;Ancak görüntünün kendisini düzenlerdim, böylece kullanıcının daha az yüklemesi gerekir ve kenar yumuşatma olmadan büzülmüş bir görüntüden daha iyi görünebilir.
background: url('resized_image.png')\9;IE lt 9 için eklemeniz gerekiyor
Kullanıcılarınız yalnızca Opera 9.5+, Safari 3+, Internet Explorer 9+ ve Firefox 3.6+ kullanıyorsa cevap evettir. Aksi takdirde hayır.
Arka plan boyutu özelliği CSS 3'ün bir parçasıdır, ancak çoğu tarayıcıda çalışmaz.
Amaçlarınız için gerçek resmi büyütmeniz yeterlidir.
Mümkün değil . Arka plan her zaman olabildiğince büyük olacaktır, ancak kendisini tekrarlamasını durdurabilirsiniz background-repeat.
background-repeat: no-repeat;İkinci olarak, arka plan bir kutunun kenar boşluğu alanına girmez, bu nedenle arka planın yalnızca bir kutunun gerçek içeriğinde olmasını istiyorsanız, dolgu yerine kenar boşluğu kullanabilirsiniz.
Üçüncü olarak, arka plan görüntüsünün nerede başlayacağını kontrol edebilirsiniz. Varsayılan olarak bir kutunun sol üst köşesidir, ancak bunu şu şekilde kontrol edebilirsiniz background-position:
background-position: center top;ya da belki
background-position: 20px -14px;Negatif konumlandırma CSS sprite'larında çok kullanılır .
Bir tane var unutulmuş argüman:
background-size: contain;Bu, streç olmaz background-imageonunla yapacağı gibicover . Uzun taraf dış kabın genişliğine veya yüksekliğine ulaşana kadar gerilir ve böylece görüntü korunur.
Düzenleme: da var -webkit-background-sizeve -moz-background-size.
Arka plan boyutu özelliği IE9 +, Firefox 4+, Opera, Chrome ve Safari 5+ sürümlerinde desteklenir.
@ Tetra'nın verdiği cevabı desteklemek için, eğer görüntü bir SVG ise, o zaman gerçek görüntüyü yeniden boyutlandırmanın gerekli olmadığını belirtmek isterim.
SVG dosyası yalnızca XML olduğundan, XML içinde görünmesini istediğiniz boyutu belirleyebilirsiniz.
Ancak, aynı SVG görüntüsünü farklı yerlerde kullanıyorsanız ve farklı boyutlarda olması gerekiyorsa, background-size çok yararlıdır. SVG dosyaları yine de raster görüntülerden doğal olarak daha küçüktür ve CSS ile anında yeniden boyutlandırma, farkında olduğum herhangi bir performans maliyeti olmadan çok yararlı olabilir ve kesinlikle hiçbir kalite kaybı olmaz.
İşte kısa bir örnek:
<div class="hasBackgroundImage">content</div>
.hasBackgroundImage
{
background: transparent url('/image/background.svg') no-repeat 10px 5px;
background-size: 1.4em;
}(Not: Bu benim için Firefox 8, Safari 5.1 ve Chrome 16.0.912.63 ile OS X 10.7'de çalışır)
CSS3 ile tamamen yapabilirsiniz:
body {
background-image: url(images/bg-body.png);
background-size: 100%; /* size the background image at 100% like any responsive img tag */
background-position: top center;
background-repeat:no-repeat;
}Bu, bir arka plan görüntüsünü gövde öğesinin genişliğinin% 100'üne göre boyutlandırır ve daha sonra gövde öğesi daha küçük çözünürlükler için yeniden boyutlandırıldığı için arka planı yeniden boyutlandırır.
İşte örnek: http://www.sccc.premiumdw.com/examples/resize-background-images-with-css/
Çapraz tarayıcı uyumlu olmak için yuvalanmış div'ler var
<div>
<div style="background: url('bg.gif') top repeat-y;min-width:490px;">
Put content here
</div>
</div>
İki <div>öğe kullanabilirsiniz :
Bir tanesi bir kaptır (arka plan resminin görünmesini istediğiniz şeydir).
İkincisi içeride. Boyutunu arka plan resminin boyutuna (veya görünmesini istediğiniz boyuta) ayarlarsınız.
Daha sonra içerilen div konumlandırılacak şekilde ayarlanır absolute. Bu şekilde, içeren div'deki öğelerin normal akışına müdahale etmez.
Hareketli görüntüleri etkili bir şekilde kullanmanızı sağlar.
put the below code in the body of you css file
background-image: URL('../images/wave-green-plain-colour.jpg') ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100px;Yazdın
background: url('bg.gif') top repeat-y;
background-size: 490px;ancak kabın boyutuna bağlı olarak yalnızca arka planı görürsünüz.
arka plan URL'sine sahip boş bir kabınız varsa ve arka plan boyutu ne olursa olsun, bg.gif öğesini görmezsiniz.
Kıtanın boyutunu
background: url('bg.gif') top repeat-y;
background-size: 490px;
height: 490px;
width: 490px;yukarıda yazdığınız kodla birleştirildiğinde, bg.gif dosyasını görebileceksiniz.
Düğmeler için arka plan resimleri kullanıyorum, ancak genişlik ve yüksekliği ayarlasam da görüntüyü yalnızca metinle aynı boyutta gösteriyor. Bunun yerine, metnimi karakterlerle dolduruyorum (kesilmeyen boşluklar). Temelde tüm düğme arka planı görünene kadar gerektiği kadar tokat atıyorum. Yani böyle bir kod olabilir:
Stil sayfasında:
#v2menu-home {
background-image:url(../v2-siteimages/button.png);
background-repeat:no-repeat;
}HTML belgesinde:
<div id="v2menu">
<a id="v2menu-home" href="/index.php">home </a>
</div><!-- v2menu -->Örneğin:
Arka plan resmi her zaman kap boyutuna sığacaktır (genişlik% 100 ve yükseklik 100 piksel).
Tarayıcılar arası CSS:
.app-header {
background: url("themes/default/images/background.jpg") no-repeat;
-moz-background-size: 100% 100px;
-webkit-background-size: 100% 100px;
-o-background-size: 100% 100px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src = "themes/default/images/background.jpg", sizingMethod = 'scale');
background-size: 100% 100px;}
Bu, arka plan boyutunda CSS3'te yapmak mümkündür
.backgroungImage {
background: url('../imageS/background.jpg') no-repeat;
background-size: 32px 32px;
}background-sizeAynı backgroundözelliği ayarlamak istiyorsanız şunu kullanın:
background:url(my-bg.png) no-repeat top center / 50px 50px;