Jak zmienić kolor tła za pomocą CSS

Jak zmienić kolor tła za pomocą CSS

Jednym z najbardziej ekscytujących momentów w karierze każdego początkującego programisty front-end jest nauka zmiany koloru tła strony internetowej.





Praca z HTML jest świetna, ale za pomocą zaledwie kilku linijek CSS możesz sprawić, że Twoje strony i Twoja podróż programistyczna ożyją.



Ten przewodnik zawiera wszystko, co musisz wiedzieć, jak zmienić kolor tła za pomocą CSS.





Rozpocznij konfigurację

Wyrzućmy trochę wstępnej pracy.

czy możesz zobaczyć, kto Cię szuka w google?

Notatka : polecam używać Kod programu Visual Studio z Rozszerzenie serwera na żywo aby zobaczyć zmiany w czasie rzeczywistym podczas aktualizacji kodu HTML i CSS.



  1. Utwórz folder na pliki swojego projektu.
  2. Stworzyć index.html plik do przechowywania kodu HTML. Możesz użyć standardowego kodu lub po prostu go skonfigurować , , oraz Tagi.
  3. Stwórz style.css plik CSS.
  4. Połącz swój plik CSS z kodem HTML, umieszczając w środku Tagi.

Teraz możesz rozpocząć edycję CSS.

Związane z: Jak stworzyć stronę internetową Boilerplate



Jak zmienić kolor tła za pomocą CSS

Najprostszym sposobem zmiany koloru tła jest kierowanie na ciało etykietka. Następnie edytuj kolor tła własność. Kody kolorów można znaleźć, wyszukując i korzystając z rozszerzenia przeglądarki Google Color Picker

body {
background-color: rgb(191, 214, 255);
}

Ten kod zmienia tło na ładny jasnoniebieski.



ten kolor tła nieruchomość przyjmuje kolory w sześciu różnych formach:

  • Nazwa : jasnoniebieski; (dla bliskiego przybliżenia)
  • kod szesnastkowy : # bfd6ff;
  • RGB : rgb(191, 214, 255);
  • RGB : rgba (191, 214, 255, 1); gdzie do jest alfa (nieprzezroczystość)
  • HSL : hsl(218°, 100%, 87%);
  • HSLA : hsla (218°, 100%, 87%, 1); gdzie do jest alfa (nieprzezroczystość)

Użyj skrótu tło nieruchomość w miejsce kolor tła wyciąć dodatkowy kod. Za pomocą tej metody możesz zmienić kolor tła dowolnego elementu HTML.

Stwórz i nadaj mu klasę — w tym przypadku klasa to płyta . Ustaw jego wzrost oraz szerokość właściwości w CSS. Wybierz element w CSS i pokoloruj go.

body {
background-color: rgb(191, 214, 255);
}
.container{
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
}
.panel {
background: rgb(255, 148, 148);
height: 10rem;
width: 30%;
}
.muo-text {
font-size: 3em;
font-weight: bolder;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
position: absolute;
}

Tutaj możesz zobaczyć ciało tło Właściwość jest stylizowana niezależnie od .płyta tło własność.

Właściwość background akceptuje również gradienty:

body {
background: linear-gradient(90deg, rgba(234,233,255,1) 0%, rgba(252,167,213,1) 35%, rgba(194,245,255,1) 100%);
}

Jak zmienić obraz tła w CSS

Co zrobić, jeśli chcesz, aby tło było obrazem, a nie jednolitym kolorem lub gradientem? Skrót tło nieruchomość jest znajomym przyjacielem.

Upewnij się, że obraz znajduje się w tym samym folderze co pliki HTML i CSS. W przeciwnym razie będziesz musiał użyć ścieżki pliku w nawiasach, a nie tylko nazwy:

body {
background: url(leaves-and-trees.jpg)
}

Och! Wygląda na to, że obraz jest zbyt powiększony. Możesz to naprawić za pomocą rozmiar tła własność.

body {
background: url(leaves-and-trees.jpg);
background-size: cover;
}

Aby użyć skrótu tło nieruchomość w połączeniu z rozmiar tła własność okładka , musisz również określić pozycja w tle właściwości i oddziel wartości ukośnikiem odwrotnym (nawet jeśli są to domyślne wartości pozycyjne, takie jak u góry z lewej .)

body {
background: url(leaves-and-trees.jpg) top left / cover;
}

Proszę bardzo! Właściwy rozmiar obrazu tła w jednej linii CSS.

Czytaj więcej: Jak ustawić obraz tła w CSS

Notatka : Uważaj na duże obrazy tła, które zajmują dużo miejsca. Mogą one być trudne do załadowania na urządzeniu mobilnym, gdzie masz dwie sekundy, aby dać użytkownikom powód do pozostania na stronie.

Ulepsz swoją grę CSS za pomocą CSS box-shadow

Dla programisty, takiego jak Ty, właściwości background-color i background-image to przestarzałe wiadomości. Na szczęście zawsze można się czegoś nauczyć.

Spróbuj wzmocnić swoje pudełka za pomocą CSS box-shadow. Twoje elementy HTML nigdy nie wyglądały lepiej!

Udział Udział Ćwierkać E-mail Jak korzystać z CSS box-shadow: 13 sztuczek i przykładów

Pudełka nijakie wyglądają nudno. Udekoruj je efektem CSS box-shadow!

Czytaj dalej Powiązane tematy
  • Programowanie
  • Tworzenie stron internetowych
  • Projektowanie stron
  • CSS
O autorze Marcus Mears III(26 opublikowanych artykułów)

Marcus jest przez całe życie entuzjastą technologii i redaktorem w MUO. Rozpoczął karierę jako niezależny pisarz w 2020 roku, obejmując popularne technologie, gadżety, aplikacje i oprogramowanie. Studiował informatykę na studiach, koncentrując się na tworzeniu stron internetowych.

Więcej od Marcusa Mearsa III

Zapisz się do naszego newslettera

Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!

Kliknij tutaj, aby zasubskrybować