CSS wielokrotnego tła

W tym rozdziale nauczysz się, jak dodać wiele obrazów tła do elementu.

Nauczysz się również następujących atrybutów:

  • background-size
  • background-origin
  • background-clip

CSS wielokrotnego tła

CSS pozwala na dodanie wielu obrazów tła do elementu za pomocą background-image Atrybut dodaje do elementu wiele obrazów tła.

Różne obrazy tła są oddzielone przecinkami, a obrazy są nałożone na siebie, przy czym pierwszy obraz jest najbliższy widzowi.

Poniższy przykład ma dwa obrazy tła, pierwszy obraz to kwiaty (współosiowo z dołu i z prawej strony), drugi obraz to tło z papieru (współosiowo z lewej strony i z góry):

przykład

#example1 {
  background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

Spróbuj Sam

Wielokrotne obrazy tła mogą być używane za pomocą osobnego atrybutu tła (jak wyżej opisano) lub background skróconych atrybutów do określenia.

Poniższy przykład używa background Skrócone atrybuty (rezultat jest taki sam jak w poprzednim przykładzie):

przykład

#example1 {
  background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

Spróbuj Sam

CSS rozmiar tła

CSS background-size Atrybut pozwala określić rozmiar obrazu tła.

Rozmiar obrazu tła można określić za pomocą długości, procentu lub jednym z dwóch poniższych kluczowych słów:contain lub cover.

Poniżej znajduje się przykład, w którym rozmiar obrazu tła jest znacznie mniejszy niż oryginalny obraz (w pikselach):

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Oto kod:

przykład

#div1 {
  background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

Spróbuj Sam

background-size inne dwie możliwe wartości to contain i cover.

contain kluczowe słowa skalują obraz tła do jak największego rozmiaru (ale szerokość i wysokość muszą pasować do obszaru treści). W zależności od proporcji obrazu tła i obszaru umieszczenia tła, mogą istnieć pewne obszary tła, które nie są pokryte obrazem tła.

cover kluczowe słowa skalują obraz tła, aby całkowicie pokryć obszar treści (szerokość i wysokość są równe lub większe niż obszar treści). W ten sposób niektóre części obrazu tła mogą być niewidoczne w obszarze umieszczenia tła.

Poniższy przykład pokazuje: contain i cover Sposób użycia:

przykład

#div1 {
  background: url(img_flower.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}
#div2 {
  background: url(img_flower.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

Spróbuj Sam

Definiowanie rozmiaru wielu obrazów tła

Przy pracy z wieloma tła:background-size Atrybut może przyjąć kilka wartości określających rozmiar tła (lista oddzielona przecinkami).

Poniżej znajduje się przykład określający trzy obrazy tła, każdemu z nich przypisany jest inny wartość background-size:

przykład

#example1 {
  background: url(tree.png) left top no-repeat, url(flower.gif) right bottom no-repeat; 
  	url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

Spróbuj Sam

Pełnowymiarowy obraz tła

Teraz, chcemy, aby obraz tła na stronie zawsze pokrywał całe okno przeglądarki.

Konkretne wymagania są następujące:

  • wypełnienie całej strony obrazem (bez pustych przestrzeni)
  • skalowanie obrazu według potrzeby
  • centrowanie obrazu na stronie
  • nie wywołuje paska przewijania

Poniższy przykład pokazuje, jak to zrobić: użyj elementu <html> (element <html> jest zawsze przynajmniej wysokości okna przeglądarki). Następnie ustaw stałe i wyśrodkowane tło na nim. Na końcu użyj właściwości background-size do dostosowania jego rozmiaru:

przykład

html {
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

Spróbuj Sam

Obraz Hero

Możesz również używać różnych właściwości tła w <div> do tworzenia obrazu Hero (większego obrazu z tekstem) i umieszczenia go w pożądanym miejscu.

przykład

.hero-image {
  background: url(img_man.jpg) no-repeat center; 
  background-size: cover;
  height: 500px;
  position: relative;
}

Spróbuj Sam

CSS Atrybut background-origin

CSS background-origin Właściwość określa pozycję obrazu tła.

Ta właściwość akceptuje trzy różne wartości:

  • border-box - obraz tła zaczyna się od lewego górnego rogu ramki
  • padding-box - obraz tła zaczyna się od lewego górnego rogu marginesu wewnętrznego (domyślne)
  • content-box - obraz tła zaczyna się od lewego górnego rogu zawartości

Poniższy przykład pokazuje: background-origin Właściwości:

przykład

#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(flower.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}

Spróbuj Sam

CSS Atrybut background-clip

CSS background-clip Właściwość określa obszar rysowania tła.

Ta właściwość akceptuje trzy różne wartości:

  • border-box - rysowanie tła do zewnętrznych krawędzi ramki (domyślne)
  • padding-box - rysowanie tła do zewnętrznych krawędzi wewnętrznego marginesu
  • content-box - rysowanie tła w polu zawartości

Poniższy przykład pokazuje: background-clip Właściwości:

przykład

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}

Spróbuj Sam

Zaawansowane Atrybuty Tła CSS

Atrybut Opis
background Skrócona właściwość do ustawienia wszystkich atrybutów tła w jednym deklaracji.
background-clip Określa obszar rysowania tła.
background-image Przypisuje do elementu jedno lub więcej obrazów tła.
background-origin Określa pozycję umieszczenia tła obrazu.
background-size Określa rozmiar tła obrazu.