Czy można ustawić rozmiar obrazu tła za pomocą CSS?
Chcę zrobić coś takiego:
background: url('bg.gif') top repeat-y;
background-size: 490px;
Ale wydaje się, że to całkowicie niewłaściwe robić to w ten sposób ...
Odpowiedzi:
Jeśli chcesz powiększyć obraz, musisz edytować sam obraz w edytorze obrazów.
Jeśli używasz znacznika img, możesz zmienić rozmiar, ale nie dałoby to pożądanego rezultatu, jeśli chcesz, aby obraz był tłem dla innych treści (i nie będzie się powtarzał tak, jak chcesz) ...
Można to zrobić w CSS3 z background-size.
Wszystkie nowoczesne przeglądarki obsługują to, więc jeśli nie potrzebujesz obsługi starych przeglądarek, jest to odpowiedni sposób.
Obsługiwane przeglądarki:
Mozilla Firefox 4.0+ (Gecko 2.0+), Microsoft Internet Explorer 9.0+, Opera 10.0+, Safari 4.1+ (webkit 532) i 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;
}W szczególności podoba mi się wartość coveri contain, która daje nam nową moc kontroli, której wcześniej nie mieliśmy.
Możesz także użyć background-size: roundtego, co ma znaczenie w połączeniu z powtórzeniem:
.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;
}Spowoduje to dostosowanie szerokości obrazu, dzięki czemu będzie pasować całą liczbę razy w obszarze pozycjonowania tła.
Uwaga dodatkowa
Jeśli wymagany rozmiar to rozmiar statyczny w pikselach, rozsądnie jest fizycznie zmienić rozmiar rzeczywistego obrazu. Ma to na celu zarówno poprawę jakości zmiany rozmiaru (biorąc pod uwagę, że twoje oprogramowanie do grafiki lepiej działa niż przeglądarki), jak i oszczędność przepustowości, jeśli oryginalny obraz jest większy niż to, co ma być wyświetlane.
Obsługuje to tylko CSS 3,
background-size: 200px 50px;Ale edytowałbym sam obraz, aby użytkownik musiał załadować mniej, a może wyglądać lepiej niż obraz skurczony bez antyaliasingu.
background: url('resized_image.png')\9;dla IE lt 9
Jeśli użytkownicy używają tylko Opery 9.5+, Safari 3+, Internet Explorer 9+ i Firefox 3.6+, odpowiedź brzmi tak. W przeciwnym razie nie.
Właściwość wielkości tła jest częścią CSS 3, ale nie będzie działać w większości przeglądarek.
Do swoich celów po prostu powiększ rzeczywisty obraz.
Nie jest możliwe . Tło zawsze będzie tak duże, jak to możliwe, ale możesz powstrzymać się przed powtórzeniem się background-repeat.
background-repeat: no-repeat;Po drugie, tło nie przechodzi w obszar marginesu ramki, więc jeśli chcesz, aby tło było tylko na rzeczywistej zawartości ramki, możesz użyć marginesu zamiast wypełnienia.
Po trzecie, możesz kontrolować, gdzie zaczyna się obraz tła. Domyślnie jest to lewy górny róg pola, ale możesz to kontrolować za pomocą background-position:
background-position: center top;a może
background-position: 20px -14px;Negatywne pozycjonowanie jest często używane w przypadku duszków CSS .
Jest jeden zapomniany argument:
background-size: contain;To nie rozciągnie twojego, background-imagejak by to zrobiło cover. Rozciągałby się, aż dłuższy bok osiągnie szerokość lub wysokość zewnętrznego pojemnika, a tym samym zachowuje obraz.
Edycja: Jest też -webkit-background-sizei -moz-background-size.
Właściwość rozmiaru tła jest obsługiwana w IE9 +, Firefox 4+, Opera, Chrome i Safari 5+.
Na poparcie odpowiedzi udzielonej przez @tetra chcę podkreślić, że jeśli obraz jest plikiem SVG, zmiana rozmiaru obrazu rzeczywistego nie jest konieczna.
Ponieważ plik SVG to tylko XML, możesz określić dowolny rozmiar, który ma się pojawiać w pliku XML.
Jeśli jednak używasz tego samego obrazu SVG w różnych miejscach i potrzebujesz różnych rozmiarów, użycie background-sizejest bardzo pomocne. Pliki SVG i tak są z natury mniejsze niż obrazy rastrowe, a zmiana rozmiaru w locie za pomocą CSS może być bardzo pomocna bez żadnych kosztów wydajności, o których jestem świadomy, a na pewno niewielka utrata jakości.
Oto szybki przykład:
<div class="hasBackgroundImage">content</div>
.hasBackgroundImage
{
background: transparent url('/image/background.svg') no-repeat 10px 5px;
background-size: 1.4em;
}(Uwaga: działa to dla mnie w OS X 10.7 z Firefox 8, Safari 5.1 i Chrome 16.0.912.63)
Z CSS3 możesz całkowicie:
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;
}Spowoduje to zmianę rozmiaru obrazu tła do 100% szerokości elementu korpusu, a następnie odpowiednio zmieni rozmiar tła w miarę zmiany rozmiaru elementu korpusu w przypadku mniejszych rozdzielczości.
Oto przykład: http://www.sccc.premiumdw.com/examples/resize-background-images-with-css/
Wystarczy zagnieździć div, aby były kompatybilne z różnymi przeglądarkami
<div>
<div style="background: url('bg.gif') top repeat-y;min-width:490px;">
Put content here
</div>
</div>
Możesz użyć dwóch <div>elementów:
Jeden to pojemnik (to ten, w którym pierwotnie chciałeś, aby pojawił się obraz tła).
Drugi jest zawarty w. Ustawiasz jego rozmiar na rozmiar obrazu tła (lub rozmiar, który ma się pojawiać).
Zawarty div jest następnie ustawiany na pozycjonowanie absolute. W ten sposób nie zakłóca to normalnego przepływu przedmiotów w zawierającym div.
Umożliwia wydajne wykorzystanie obrazów sprite.
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;Napisałeś
background: url('bg.gif') top repeat-y;
background-size: 490px;ale tło będzie widoczne tylko w zależności od wielkości pojemnika.
jeśli masz pusty pojemnik z URL-em w tle i bez względu na rozmiar tła, nie zobaczysz bg.gif.
Jeśli ustawisz rozmiar kontynentu na
background: url('bg.gif') top repeat-y;
background-size: 490px;
height: 490px;
width: 490px;W połączeniu z kodem, który napisałeś powyżej, będziesz mógł zobaczyć plik bg.gif.
background-size działa w Chrome 4.1, ale jak dotąd nie mogłem go uruchomić w Firefoksie 3.6.
Używam obrazów tła do przycisków, ale pokazuje on tylko ten sam rozmiar co tekst, nawet jeśli ustawię szerokość i wysokość. Zamiast tego wypełniam tekst znakami (niełamliwe spacje). Zasadniczo uderzam tyle, ile potrzeba, aż pojawi się całe tło przycisku. Mogę mieć taki kod:
W arkuszu stylów:
#v2menu-home {
background-image:url(../v2-siteimages/button.png);
background-repeat:no-repeat;
}W dokumencie HTML:
<div id="v2menu">
<a id="v2menu-home" href="/index.php">home </a>
</div><!-- v2menu -->Na przykład:
obraz tła zawsze będzie pasował do rozmiaru pojemnika (szerokość 100% i wysokość 100 pikseli).
CSS w różnych przeglądarkach:
.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;}
Można to zrobić w CSS3 z rozmiarem tła
.backgroungImage {
background: url('../imageS/background.jpg') no-repeat;
background-size: 32px 32px;
}Jeśli chcesz ustawić background-sizetę samą backgroundwłaściwość, możesz użyć:
background:url(my-bg.png) no-repeat top center / 50px 50px;