CSS to skrót od Cascading Style Sheets. Jest to prosty, ale potężny język projektowania, który ma możliwość przekształcania stron internetowych. Mówiąc najprościej, usprawnia proces tworzenia stron internetowych, które są prezentowalne i atrakcyjne dla użytkowników za pomocą . W tym artykule zrozumiemy, jak zaimplementować różne obrazy tła w CSS w następującej kolejności:
- Obraz tła we właściwościach CSS
- Obraz tła w CSS
- powtarzanie tła
- Załącznik w tle
- Pozycja tła
- Obraz tła w rozmiarze CSS
- Kolor tła
Obraz tła we właściwościach CSS
Istnieje wiele właściwości, które służą do kontrolowania zachowania i położenia obrazu. Te właściwości to:
jak zrobić moc w Pythonie
- zdjęcie w tle
- powtarzanie tła
- załącznik w tle
- pozycja tła
- background-size
- kolor tła
Zapoznamy się z każdą z tych właściwości i zobaczymy, kiedy i jak z nich korzystać, korzystając z ciekawej demonstracji.
Obraz tła w CSS
Plik zdjęcie w tle właściwość, jak sugeruje nazwa, służy po prostu do wskazywania i ustawiania obrazu tła za pomocą elementu na stronie internetowej. Obraz tła jest domyślnie umieszczony w lewym górnym rogu elementu.
składnia: background-image: url | none | linear-gradient | radial-gradient
body {background-image: url ('apple.jpg')}tło za pomocą adresu URL
Rozumiemy parametry:
- url: Dane wejściowe tego parametru pozwalają nam określić ścieżkę do pliku do dowolnego obrazu lub adres URL do obrazu, który należy ustawić jako tło. Aby zadeklarować więcej niż jeden obraz, adresy URL są oddzielane separatorem przecinkiem.
body {background-image: url ('apple.jpg')} 
- Żaden: Jest to domyślna wartość właściwości i żaden obraz tła nie jest renderowany, jeśli określono jego wartość.
body {background: none}- gradient liniowy(): Obraz tła jest ustawiony na gradient liniowy. W przypadku tej właściwości należy określić co najmniej dwa kolory, tj. Od góry do dołu.
body {background-color: # 001 background-image: linear-gradient (biały 15%, przezroczysty 16%), linear-gradient (biały 15%, przezroczysty 16%) background-size: 60px 60px background-position: 0 0, 30px 30px}- radial-gradient (): Obraz tła ma gradient radialny. W przypadku tej właściwości wymagane są co najmniej dwa kolory, tj. Środek do krawędzi.
body {background-color: # 001 background-image: radial-gradient (biały 15%, przezroczysty 16%), radial-gradient (biały 15%, przezroczysty 16%) background-size: 60px 60px background-position: 0 0, 30px 30px}- repeating-linear-gradient (): Powtarza liniowy gradient. Skorzystajmy z tego samego przykładu, który widzieliśmy powyżej w gradiencie liniowym dla gradientu powtarzanego liniowo i zobaczmy różnicę.
body {background-color: # 001 background-image: repeating-linear-gradient (biały 15%, przezroczysty 16%), repeating-linear-gradient (biały 15%, przezroczysty 16%) background-size: 60px 60px background-position : 0 0, 30px 30px}- repeating-radial-gradient (): Powtarza gradient radialny. Przeanalizujmy ten sam przykład, który użyliśmy powyżej, w gradiencie radialnym.
body {background-color: # 001 background-image: repeating-radial-gradient (biały 15%, przezroczysty 16%), powtarzający się-radialny-gradient (biały 15%, przezroczysty 16%) background-size: 60px 60px background-position : 0 0, 30px 30px}Tło zastępcze
Profesjonalną wskazówką jest zawsze dodanie koloru tła jako opcji zastępczej. Przychodzi to na ratunek zwłaszcza wtedy, gdy obrazy tła nie ładują się lub tło gradientowe, które ustawiliśmy podczas programowania, nie jest obsługiwane przez niektóre stare przeglądarki, w których jest wyświetlane.
Nie psuje to wrażeń użytkownika i można to zadeklarować w ten sposób:
body {background: url (apple_lost.jpg) pink}Wiele tła
Mamy również opcję ustawienia wielu obrazów tła i jest to wymagane w większości przypadków, takich jak obraz pierwszego planu i tła. Ważna jest tutaj kolejność obrazów, najpierw zadeklarowano obraz, który powinien znajdować się z przodu, a obraz, który powinien znajdować się z tyłu jako ostatni, jest deklarowany jako następny.
Poniżej znajduje się przykład wielu obrazów tła:
body {background-image: url ('small-heart.jpg'), url ('background.jpg')}powtarzanie tła
Właściwość background-repeat jest używana wraz z background-image w celu zdefiniowania zachowania powtarzania obrazu. Określa, czy i jak obraz tła zostanie powtórzony. Obraz tła jest domyślnie powtarzany zarówno w pionie, jak iw poziomie.
Możliwe wartości to:
- powtórz - obraz powtarza się zarówno w poziomie, jak iw pionie
- no-repeat - Obraz się nie powtarza
- powtórz-x - Obraz jest powtarzany w poziomie
- powtórz-y - Obraz jest powtarzany w pionie
- spacja- obraz jest powtarzany z równymi odstępami lub przerwami między.
- round - obraz jest powtarzany, aby wypełnić obszar bez żadnych przerw między nimi.
Składnia CSS dla właściwości powtarzania tła to:
powtarzanie tła: powtórz | powtórz-x | powtórz-y | bez powtórzeń | spacja | runda
body {background-image: url ('heart.png'), url ('background.png') background-repeat: repeat-y, repeat-x background-color: #ffffff}Załącznik w tle
Plik załącznik w tle Właściwość jest używana wraz z obrazem tła do określenia, czy obraz powinien przewijać się podczas przewijania treści. Oznacza to, że obraz tła powinien być ustalony lub powinien być przewijany wraz z dokumentem względem widoku okna przeglądarki. Wartością domyślną jest przewijanie.
Możliwe wartości to:
- scroll - obraz przewija się wraz ze stroną.
- naprawiono - obraz nie będzie przewijał się wraz ze stroną
Składnia CSS dla załącznika w tle to:
załącznik w tle: przewiń | naprawiono
body {background-image: url ('heart.png'), url ('background.png') background-repeat: space, round}Pozycja tła
Plik pozycja tła właściwość jest używana do oznaczenia lokalizacji lub położenia obrazu tła. Możliwe wartości to:
- Top
- dobrze
- Dolny
- lewo
- środek
- kombinacja tych wartości (np. lewa góra)
Składnia CSS dla pozycji w tle to:
background-position: góra | prawa | lewa | dół | środek
body {background-image: url ('heart.png') background-repeat: no-repeat background-attach: scroll}Obraz tła w rozmiarze CSS
Ta właściwość jest jedną z najbardziej przydatnych, ponieważ pozwala nam kontrolować rozmiar obrazu tła. Istnieją różne kombinacje, które możemy zastosować z tą właściwością i uzyskać odpowiednie wyniki. Wartość domyślna to auto.
Z rozmiarem tła można użyć następujących wartości:
- automatyczny
- długość - wysokość i szerokość obrazu np. 20px 40px.
- procent - wysokość i szerokość obrazu jako procent w.r.t element nadrzędny, np. 50% 50%.
- center - wyrównaj obraz do środka
- okładka, skalując obraz tak, aby całkowicie przykrył obszar tła.
- zawierać, skalując obraz tak, aby pasował do jego rzeczywistej wysokości i szerokości.
Składnia CSS dla pozycji w tle to:
background-size: wartość
body {background-image: url ('heart.png'), url ('background.png') background-repeat: no-repeat, repeat background-size: 400px 150px, cover}body {background-image: url ('heart.png'), url ('background.png') background-repeat: no-repeat, repeat background-size: include, 400px 150px}Kolor tła
To najprostsza ze wszystkich właściwości w CSS. Nakłada jednolite kolory na tło strony. Wartość tej właściwości można określić za pomocą kolorów (np. Czerwony, niebieski itp.), Wartości szesnastkowej i wartości RGB.
Składnia CSS dla koloru tła to:
kolor tła: wartość
body {background-image: url (small-heart.jpg) background-color: # 22a8e3}Na tym kończą się wszystkie właściwości, których możemy użyć w tle. Zawsze możemy wypróbować różne kombinacje właściwości, jak widzieliśmy na naszej demonstracji.
CSS jest niezbędny i musi zdobyć umiejętności każdego programisty front-endowego. Pomaga przy projektowaniu i stylizowaniu tła oraz budowaniu imponujących stron internetowych i wzbogacaniu doświadczeń użytkowników. Najlepiej jest dalej eksperymentować i w pełni wykorzystywać tę specjalną technologię front-end, ponieważ może ona zdziałać cuda i dynamicznie przekształcać stronę.
Sprawdź nasze który obejmuje szkolenie na żywo prowadzone przez instruktora i rzeczywiste doświadczenie projektowe. To szkolenie zapewni Ci biegłość w pracy z technologiami internetowymi zaplecza i front-endu. Obejmuje szkolenia w zakresie tworzenia stron internetowych, jQuery, Angular, NodeJS, ExpressJS i MongoDB.
Masz do nas pytanie? Wspomnij o tym w sekcji komentarzy na blogu „Obraz tła w CSS”, a my skontaktujemy się z Tobą.