Latest web development tutorials

Tła CSS (w tle)

Właściwości CSS tła są używane do definiowania tła elementów HTML.

Właściwości CSS zdefiniować efekty w tle:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Kolor tła

Właściwość background-color określa kolor tła elementu.

Kolor tła strony, aby korzystać w selektorze ciała:

Przykłady

body {background-color:#b0c4de;}

Spróbuj »

CSS wartości kolorów jest zwykle definiowane w następujący sposób:

  • Hex - takich jak: "# ff0000"
  • RGB - takich jak: "rgb (255,0,0)"
  • Nazwy kolorów - takich jak: "czerwony"

Poniżej przykład, h1, P i elementy div mają różne kolory tła:

Przykłady

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

Spróbuj »

Tło obrazu

atrybutu background-image opisuje elementy tła.

Domyślnie obraz tła kafelki wielokrotnie wyświetlany na pokrycie całego podmiotu elementu.

Przykłady strona ustawienie tła:

Przykłady

body {background-image:url('paper.gif');}

Spróbuj »

Oto przykład złej kombinacji tekstu i tła. Tekst słabą czytelność:

Przykłady

body {background-image:url('bgdesert.jpg');}

Spróbuj »

Obrazy tła - Dachówka pozioma lub pionowa

Domyślnie właściwość background-image kafelki w orientacji poziomej lub pionowej strony.

Jeśli niektóre obrazy sąsiadująco w pionie i poziomie, więc wygląda to bardzo skoordynowane, co następuje:

Przykłady

body
{
background-image:url('gradient2.png');
}

Spróbuj »

Jeśli obraz płytki (repeat-x) tylko w kierunku poziomym, strona tło będzie lepiej:

Przykłady

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

Spróbuj »

Tło obrazu - Ustaw pozycję i nie płytka

uwaga Niech obraz tła nie wpływa na układ tekstu

Jeśli nie chcesz, aby płytki obrazu, można użyć atrybutu background-repeat:

Przykłady

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

Spróbuj »

Powyższy przykład, obraz tła i tekst pojawia się w tym samym miejscu, tak aby układ strony bardziej uzasadnione, nie ma wpływu na czytanie tekstu, możemy zmienić położenie obrazu.

Właściwość background-position może być użyty do zmiany obrazu w tle tutaj:

Przykłady

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

Spróbuj »

Tło - skróconą własnością

W powyższym przykładzie widzimy kolor tła strony przez wiele atrybutów, które kontrolują.

Aby uprościć kod dla tych właściwości, możemy wykorzystać te atrybuty są połączone w tej samej nieruchomości.

Skrótowym kolor tła dla nieruchomości "w tle":

Przykłady

body {background:#ffffff url('img_tree.png') no-repeat right top;}

Spróbuj »

Przy użyciu właściwości skrótowej, kolejność atrybutów jako ::

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Wszystkie te atrybuty nie trzeba używać, można korzystać w zależności od rzeczywistych potrzeb strony.

Ten przykład używa CSS opisano wcześniej, można zobaczyć przykład: Przykłady CSS

Przykłady

Więcej przykładów

Jak ustawić stały obraz tła
Ten przykład pokazuje jak ustawić stały obraz tła. Obraz nie będzie przewijać się z resztą strony.

Właściwości tła CSS

Property 描述
background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。