To tłumaczenie jest niekompletne. Pomóż przetłumaczyć ten artykuł z języka angielskiego.
Podsumowanie
background-repeat określa, czy obrazek jest powtarzany (kafelkowany) i w jaki sposób.
| Wartość początkowa | repeat |
|---|---|
| Stosowana do | wszystkich elementów. It also applies to ::first-letter and ::first-line. |
| Dziedziczona | no |
| Media | visual |
| Wartość wyliczona | a list, each item consisting of two keywords, one per dimension |
| Animatable | no |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
Składnia
background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit
Wartości
- repeat
- Obrazek jest powtarzany zarówno w poziomie, jak i pionie.
- repeat-x
- Obrazek jest powtarzany tylko w poziomie.
- repeat-y
- Obrazek jest powtarzany tylko w pionie.
- no-repeat
- Obrazek nie jest powtarzany: rysowana jest tylko jedna kopia obrazka.
Przykłady
HTML
<ol>
<li>no-repeat
<div class="one"> </div>
</li>
<li>repeat
<div class="two"> </div>
</li>
<li>repeat-x
<div class="three"> </div>
</li>
<li>repeat-y
<div class="four"> </div>
</li>
<li>repeat-x, repeat-y (multiple images)
<div class="five"> </div>
</li>
</ol>
CSS
/* Shared for all DIVS in example */
li {margin-bottom: 12px;}
div {
background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
width: 144px;
height: 84px;
}
/* background repeat CSS */
.one {
background-repeat: no-repeat;
}
.two {
background-repeat: repeat;
}
.three {
background-repeat: repeat-x;
}
.four {
background-repeat: repeat-y;
}
/* Multiple images */
.five {
background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
background-repeat: repeat-x,
repeat-y;
height: 144px;
}
Result
In this example, each list item is matched with a different value of background-repeat.
Specyfikacje
Zgodność z przeglądarką
| Przeglądarka | Najniższa wersja |
|---|---|
| Internet Explorer | 4 |
| Firefox | 1 |
| Netscape | 4 |
| Opera | 3.5 |