Najlepszy samouczek CSS3 tle W 2024 r. W tym samouczku możesz dowiedzieć się CSS3 tle,Pomoc Browser,CSS3 Właściwość background-image,Przykłady,Przykłady,CSS3 Właściwość background-size,Przykład 1,Przykład 2,atrybutu background-origin w CSS3,Przykłady,CSS3 wielu obrazów tła,Przykłady,CSS3 Właściwość background-clip,Przykłady,Nowe właściwości tła,
CSS3 zawiera kilka nowych właściwości tła, zapewniając większe elementy sterujące tła.
W tym rozdziale dowiesz się o następujących właściwościach tła:
Dowiesz się również jak korzystać z wielu obrazów tła.
Wartości podane w tabeli przedstawiają pierwszą przeglądarką obsługującą numer wersji obiektu.
Natychmiast po -webkit- cyfrowego -ms- lub -moz- temu w uzasadnieniu przedrostka atrybutu pierwszy numer wersji przeglądarki.
nieruchomość | |||||
---|---|---|---|---|---|
background-image (Z wielu środowisk) | 4,0 | 9,0 | 3,6 | 3,1 | 11,5 |
background-size | 4,0 1,0 -webkit- | 9,0 | 4,0 3,6 -moz- | 4,1 3,0 -webkit- | 10,5 10,0 -o- |
background-origin | 1,0 | 9,0 | 4,0 | 3,0 | 10,5 |
background-clip | 4,0 | 9,0 | 4,0 | 3,0 | 10,5 |
CSS3 można dodać obraz tła poprzez własności background-image.
Inne tło obrazu, a obraz oddzielone przecinkami, wszystkie obrazy są wyświetlane w górnej części pierwszej.
Można ustawić kilka różnych właściwości do innego obrazu
background-size określa rozmiar obrazu tła. CSS3 temu, rozmiar obrazu tła zależy od rzeczywistej wielkości obrazu.
CSS3 można określić obraz tła, daj nam ponownie określić rozmiar obrazu tła w różnych środowiskach. Można określić w procentach lub pikselach rozmiar.
Określić wielkość jest zależna od szerokości i wysokości wielkości rodzic elementem procentowego.
Resetuj obraz tła:
Rozciągnąć obraz tła, aby całkowicie wypełnić obszar treści:
atrybutu background-origin określa położenie obszaru obrazu tła.
content-box, może być umieszczony wewnątrz padding-box, a obszar border-box obrazu tła.
Ustawienie obrazu tła w zawartości pudełka:
CSS3 wielu obrazów tła | |
CSS3 pozwala na elementach Dodaj wiele obrazów tła. |
Ustaw dwa obrazy tła w elemencie body:
CSS3 Właściwość background-clip tła jest cięty, aby rozpocząć rysowanie z określonej lokalizacji
zamówienie | opis | CSS |
---|---|---|
background-clip | Przepisy tle obszaru rysunku. | 3 |
background-origin | Wcześniej określona tle regionu pozycjonowanie obrazu. | 3 |
background-size | Tło obrazu określonej wielkości. | 3 |