Możesz pomyśleć, że projektowanie tła jest proste, ale CSS ma wiele niejasnych i potężnych właściwości, których możesz się nauczyć.

Motyw tła Twojej witryny może znacząco wpłynąć na jej wygląd i sposób działania. Kolory, obrazy i wzory tła wywołują emocje i zapewniają użytkownikom wspaniałe wrażenia.

Możesz użyć właściwości tła CSS, aby ustawić styl tła elementów HTML. Dowiedz się wszystkiego o niektórych właściwościach CSS, których możesz użyć do stworzenia doskonałego tła.

1. kolor tła

The właściwość koloru tła ustawia kolor tła elementu. Możesz ustawić kolor za pomocą nazwy, takiej jak „czerwony”, wartości HEX, takiej jak „#00FF00” lub wartości RGB, np. „rgb (0, 255, 0)”. Możesz także użyć wartości HSL, aby ustawić kolor tła za pomocą odcienia, nasycenia i jasności.

Poniższy przykład ustawia kolor tła całej strony na pomarańczowy. Każdy element nagłówka ma inne tło.

<ciało>
<h2>Jestem zielonyh2>
<h3>Jestem Czerwonyh3>
<h4>Jestem niebieskih4>
ciało>

Korzystając z CSS, możesz zastosować unikalny kolor tła do każdego elementu:

instagram viewer 
ciało {
kolor tła: Pomarańczowy;
}
h2 {
kolor tła: #006600;
}


h3 {
kolor tła: rgb(128, 0, 0);
}
h4{
kolor tła: hsl(240, 100%, 50%);
}

Spowoduje to stylizację strony tak, aby wyglądała następująco:

Możesz użyć właściwości opacity, aby określić przezroczystość elementu. Krycie przyjmuje wartości od 0,0 do 1,0. Im niższa wartość, tym bardziej przezroczysty jest element.

Jako przykład spróbuj ustawić krycie elementu body na 0,5:

ciało {
kolor tła:Pomarańczowy;
nieprzezroczystość:0.5;
}

Zostanie to wyświetlone w następujący sposób — porównaj kolory z kolorami na poprzednim zrzucie ekranu:

2. zdjęcie w tle

Właściwość background-image ustawia obraz jako tło elementu. Możesz odwołać się do obrazu lokalnego lub z Internetu.

<ciało>
 <h1>CześćTam!h1>
 <P>IPosiadaćjakiśobrazWMójtło!P>
ciało>

Plik CSS:

ciało {
zdjęcie w tle:url("https://obrazy.pexels.com/zdjęcia/1191710/zdjęcie-pexels-1191710.jpeg?automatyczny=Kompresja&cs=tinysrgb&w=1260&H=750&dpr=1");
}

To wyświetli się tak:

Możesz także użyć gradienty tła aby stworzyć unikalny wygląd Twojej aplikacji.

3. powtarzanie tła

Właściwość background-image domyślnie powtarza obrazy. Możesz wybrać powtórzenie obrazu poziomo na osi x lub pionowo na osi y.

Alternatywnie, jeśli powtórzenie nie pasuje do Twojego stylu, możesz je usunąć, używając wartości bez powtórzeń.

<ciało>
<h1>Witam!h1>
<h3>Demonstruję właściwość powtarzania powtarzania tła na osi x!h3>
ciało>

Użyj następującego kodu CSS, aby zastosować powtarzające się tło wzdłuż osi x:

ciało {
zdjęcie w tle: adres URL("https://obrazy.pexels.com/zdjęcia/459335/zdjęcie-pexels-459335.jpeg?automatyczny=Kompresja&cs=tinysrgb&w=1260&H=750&dpr=1");
powtarzanie tła: powtórz-x;
}

Wynik:

Następnie spróbuj powtórzyć obraz na osi Y:

ciało {
zdjęcie w tle:url("https://cdnpixabay.com/zdjęcie/2016/04/18/22/05/muszle-1337565__340jpg");
powtarzanie tła:powtórz-y;
}

Wynik:

Przykład na osi Y z pewnością wygląda na zniekształcony. Jeśli nie są to wzory, których szukasz, możesz określić bez powtórzeń Zamiast:

ciało {
zdjęcie w tle:url("https://obrazy.pexels.com/zdjęcia/259915/zdjęcie-pexels-259915.jpeg?automatyczny=Kompresja&cs=tinysrgb&w=600");
powtarzanie tła:bez powtórzeń;
}

Wynik:

4. pozycja w tle

Właściwość background-position określa położenie obrazu tła w jego elemencie. Używa słów kluczowych specyficznych dla pozycji, takich jak Centrum, szczyt, I spód, piksel lub wartość procentowa.

Dodaj właściwość położenia tła do ostatniego obrazu:

ciało {
zdjęcie w tle: adres URL("https://obrazy.pexels.com/zdjęcia/259915/zdjęcie-pexels-259915.jpeg?automatyczny=Kompresja&cs=tinysrgb&w=600");
pozycja w tle: szczytCentrum;
}

będzie wyglądać tak:

Możesz zobaczyć obraz zniekształcający wygląd strony internetowej. Naprawmy to za pomocą następnej właściwości.

5. rozmiar tła

Możesz użyć właściwości obrazu tła, aby zdefiniować określony rozmiar obrazu. Używa słów kluczowych, takich jak okładka I zawierać lub piksel lub wartość procentowa. Naprawmy zniekształcony obraz tła, dodając właściwość background-size.

ciało {
 obraz tła: url(" https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg? auto=kompresuj&cs=tinysrgb&w=600");
 powtórzenie w tle: brak powtórzeń;
 pozycja w tle: środek;

Wynik pokazuje, że obraz pokrywa teraz stronę internetową proporcjonalnie.

6. załącznik w tle

Właściwość background-attachment określa, czy pozycja obrazu tła pozostaje stała, czy przewijana. Możesz użyć słów kluczowych fixed lub scroll.

Pokażmy to w poniższym kodzie:

<ciało>
<h1>Właściwość załącznika w tleh1>
<P>Dzięki właściwości stałego załącznika zauważysz, że tło nie porusza się wraz z tekstem.P>
<P>Dzięki właściwości stałego załącznika zauważysz, że tło nie porusza się wraz z tekstem.P>
<P>Dzięki właściwości stałego załącznika zauważysz, że tło nie porusza się wraz z tekstem.P>
<P>Dzięki właściwości stałego załącznika zauważysz, że tło nie porusza się wraz z tekstem.P>
<P>Dzięki właściwości stałego załącznika zauważysz, że tło nie porusza się wraz z tekstem.P>
<P>Dzięki właściwości stałego załącznika zauważysz, że tło nie porusza się wraz z tekstem.P>
<P>Dzięki właściwości stałego załącznika zauważysz, że tło nie porusza się wraz z tekstem.P>
<P>Dzięki właściwości stałego załącznika zauważysz, że tło nie porusza się wraz z tekstem.P>
<P>Dzięki właściwości stałego załącznika zauważysz, że tło nie porusza się wraz z tekstem.P>
<P>Dzięki właściwości stałego załącznika zauważysz, że tło nie porusza się wraz z tekstem.P>
<P>Dzięki właściwości stałego załącznika zauważysz, że tło nie porusza się wraz z tekstem.P>
<P>Dzięki właściwości stałego załącznika zauważysz, że tło nie porusza się wraz z tekstem.P>
ciało>

Plik CSS:

ciało {
zdjęcie w tle: adres URL("https://obrazy.pexels.com/zdjęcia/96627/zdjęcie-pexels-96627.jpeg?automatyczny=Kompresja&cs=tinysrgb&w=600");
powtarzanie tła: bez powtórzeń;
pozycja w tle: Centrum;
rozmiar tła: okładka;
załącznik w tle: naprawił;
}

Jeśli przesuniesz się w dół strony, zauważysz, że tło się nie porusza:

Aby zademonstrować właściwość scroll background-attachment, zmień słowo kluczowe na zwój. Zauważysz, że teraz tło porusza się wraz z tekstem.

ciało {
zdjęcie w tle: adres URL("https://obrazy.pexels.com/zdjęcia/96627/zdjęcie-pexels-96627.jpeg?automatyczny=Kompresja&cs=tinysrgb&w=600");
powtarzanie tła: bez powtórzeń;
pozycja w tle: Centrum;
rozmiar tła: okładka;
załącznik w tle: zwój;
}

7. Właściwość skrócona w tle

Możesz zauważyć, że musisz uwzględnić kilka właściwości, aby uzyskać idealne tło. Wiąże się to z napisaniem dużej ilości kodu. Ale możesz skrócić kod, używając właściwości skrótu w tle.

Właściwość shorthand umożliwia ustawienie wielu właściwości tła w jednym wierszu. Używasz słowa kluczowego tło ustawić właściwość skróconą.

Na przykład zamiast pisać taki kod:

ciało {
kolor tła: zielony;
zdjęcie w tle: adres URL("laptop3jpg");
powtarzanie tła: bez powtórzeń;
rozmiar tła: okładka;
załącznik w tle: zwój;
pozycja w tle: Centrum;
}

Możesz napisać to w jednym wierszu, na przykład:

ciało {
tło: zielonyadres URL("laptop3jpg") bez powtórzeńokładkazwójCentrum;
}

Właściwość skrócona jest zgodna z określoną kolejnością. Musisz wyrównać właściwości w tej kolejności, nawet jeśli brakuje jednej lub więcej. Kolejność to:

  • kolor tła
  • zdjęcie w tle
  • powtarzanie tła
  • załącznik w tle
  • pozycja w tle

Możesz tworzyć ciekawe projekty za pomocą CSS przy użyciu różnych wzory tła. Dzięki tym wzorom możesz uzyskać unikalne i wyróżniające się tła dla swojej witryny.

Inne właściwości tła w CSS

CSS jest potężny i można z nim wiele zrobić, aby urozmaicić swoją aplikację. Możesz użyć właściwości, takich jak background-clip, background-origin i background-blend-mode, aby dodać animację.

Możesz także użyć gradientów i wzorów, aby dostosować swoje strony. Eksperymentuj z właściwościami tła CSS, aby doskonalić swoje umiejętności projektowania stron internetowych.