repeat - Kurs HTML i CSS
Tło CSS / Powtarzanie tła obrazkowego {background-repeat}Spis treści {background-repeat} Powtarzanie tła obrazkowego {background-repeat} Wielokrotne powtarzanie Powtarzanie tła obrazkowego {background-repeat} (interpretuje Internet Explorer 6, Firefox, Opera, Chrome) selektor { background-repeat: powtarzanie } Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "powtarzanie" należy wpisać: repeat - powtarzanie tła w obu kierunkach (domyślnie)...
- Obramowanie CSS / Powtarzanie obramowania obrazkowego {border-image-repeat}
(CSS 3 - interpretuje Opera 15, Chrome) selektor { border-image-repeat: powtarzanie } Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "powtarzanie" należy wpisać: stretch - obrazek zostanie rozciągnięty, tak aby wypełnił całą powierzchnię (domyślnie) repeat - obrazek zostanie powielony na całej powierzchni round - powielenie z dopasowaniem rozmiarów (jeżeli długość krawędzi obramowania nie jest wielokrotnością...
- Komendy CSS 2 / background-repeat
WARTOŚĆ repeat | repeat-x | repeat-y | no-repeat | inherit OPIS Powtarzanie tła INICJALIZACJA repeat ZASTOSOWANIE wszystkie elementy DZIEDZICZENIE nie PROCENTY nie MEDIA visual
- Tło CSS / Pozycja tła obrazkowego {background-position}
...Pozwala ustalić pozycję obrazka w tle. Polecenie to ma sens, tylko jeśli określimy równocześnie tło obrazkowe oraz ograniczymy jego powtarzanie (no-repeat, repeat-x lub repeat-y). Przykład {background-position} repeat-x; center repeat-y; center no-repeat; center no-repeat; top no-repeat; right top no-repeat; right no-repeat; right bottom no-repeat; bottom no-repeat; left bottom no-repeat; left no-repeat; left top no-repeat; 1cm no-repeat; 25% 50% no-repeat; 1cm 5mm Wielokrotna...
- Obramowanie CSS / Atrybuty mieszane obramowania obrazkowego {border-image}
...url(punkt.gif); border-image-slice: 10; border-image-width: 10px; border-image-outset: 5px */ div { border-image: url(punkt.gif) 10 / 10px / 5px repeat } /* border-image-source: url(punkt.gif); border-image-slice: 10; border-image-width: 10px; border-image-outset: 5px; border-image-repeat: reptat */ div { border-image: url(punkt.gif) 10 / 10px repeat } /* border-image-source: url(punkt.gif); border-image-slice: 10; border-image-width: 10px; border-image-repeat: reptat */ div...
- Komendy CSS3 / Tło i obramowanie CSS
...treści background background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style...
- Komendy CSS3 / Maskowanie CSS
Źródło: CSS Masking Module Level 1 Spis treści clip clip-path clip-rule mask mask-border mask-border-mode mask-border-outset mask-border-repeat mask-border-slice mask-border-source mask-border-width mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-size mask-type clip Obcinanie Wartość rect() | auto Inicjalizacja auto Zastosowanie elementy pozycjonowane absolutnie Dziedziczenie nie Procenty nie Media visual clip-path...
- Oprawa graficzna / "Duszki" CSS
...{ display: block; width: 169px; text-decoration: none; padding: 5px 10px 5px 20px; font-weight: bold; background: #bfb url(obrazek.gif) no-repeat -16px -25px; color: #365; border-left: 1px solid #797;} ul a:hover { background-color: #797; background-position: -16px -49px; color: #eff; } Rezultat: Czcionki Tekst Tło Marginesy Obramowanie Na komentarz zasługują ujemne wartości położenia tła obrazkowego "background-position: -16px -25px". Jak wiadomo, pierwsza z wartości...
Menu drzewiaste / Skrypt menu drzewiastego...{ display: block; list-style-type: none; padding-left: 20px; background-image: url("document.gif"); background-position: left top; background-repeat: no-repeat; } ul.tree li.closed { background-image: url("closed.gif"); background-position: left top; background-repeat: no-repeat; } ul.tree li.opened { background-image: url("opened.gif"); background-position: left top; background-repeat: no-repeat; } ul.tree li a { font-size: 13px; text-decoration: none; cursor: pointer; }...
- Tło CSS / Atrybuty mieszane tła {background}
...tła. Już nie musimy wypisywać kolejno wszystkich cech, a jedynie ich konkretne wartości. Wartością może być np.: url(obrazek) (background-image), no-repeat (background-repeat) czy left (background-position). Wszystkie wartości muszą być oddzielone od siebie spacjami. Nie ma wymogu, aby podawać w tej deklaracji pełną listę cech składowych, jednak jeśli jakąś opuścimy, zostanie jej przypisana wartość domyślna. Dlatego poniższa reguła stylów nie ustawi tła koloru czerwonego (red), ponieważ nie...