CSS
Tła

Wprowadzenie

Składnia

• kolor tła: kolor | przezroczysty | inicjał | dziedziczyć;
• obraz w tle: adres URL | brak | inicjał | dziedziczyć;
• pozycja-tło: wartość;
• background-size: <bg-size> [<bg-size>]
• <bg-size>: auto | długość | okładka | zawierają | inicjał | dziedziczyć;
• powtórz w tle: powtórz | repeat-x | powtórz-y | bez powtórzeń | inicjał | dziedziczyć;
• pochodzenie tła: padding-box | obramowanie | pole zawartości | inicjał | dziedziczyć;
• klip-tło: ramka | padding-box | pole zawartości | inicjał | dziedziczyć;
• załącznik w tle: przewiń | naprawione | lokalny | inicjał | dziedziczyć;
• tło: bg-kolor bg-pozycja obrazu / bg-rozmiar bg-powtórzenie bg-pochodzenie bg-klip bg-początkowy załącznik | dziedziczyć;

Uwagi

Kolor tła

Właściwość background-color ustawia kolor tła elementu za pomocą wartości koloru lub słów kluczowych, takich jak transparent , inherit lub initial .

• przezroczysty , określa, że kolor tła powinien być przezroczysty. To jest domyślne.

• dziedziczy , dziedziczy tę właściwość po elemencie nadrzędnym.

• initial , ustawia tę właściwość na wartość domyślną.

Można to zastosować do wszystkich elementów i pseudoelementów ::first-letter / ::first-line .

Kolory w CSS można określić różnymi metodami .

Nazwy kolorów

CSS

div {
  background-color: red;  /* red */
} 

HTML

<div>This will have a red background</div>

• Powyższy przykład jest jednym z kilku sposobów, w jaki CSS musi reprezentować jeden kolor.

Kody kolorów szesnastkowych

Kod szesnastkowy służy do oznaczania składników RGB koloru w notacji szesnastkowej base-16. # ff0000, na przykład, jest jasnoczerwony, gdzie czerwony składnik koloru to 256 bitów (ff), a odpowiadające mu zielone i niebieskie części koloru to 0 (00).

Jeśli obie wartości w każdej z trzech par RGB (R, G i B) są takie same, kod koloru można skrócić do trzech znaków (pierwsza cyfra każdej pary). #ff0000 można skrócić do #f00 , a #ffffff można skrócić do #fff .

Notacja szesnastkowa nie uwzględnia wielkości liter.

body {
  background-color: #de1205; /* red */
}

.main {
  background-color: #00f; /* blue */
}

RGB / RGBa

Innym sposobem zadeklarowania koloru jest użycie RGB lub RGBa.

RGB oznacza czerwony, zielony i niebieski i wymaga trzech oddzielnych wartości od 0 do 255, umieszczonych między nawiasami, które odpowiadają dziesiętnym wartościom kolorów odpowiednio dla czerwonego, zielonego i niebieskiego.

RGBa pozwala na dodanie dodatkowego parametru alfa od 0,0 do 1,0 w celu zdefiniowania krycia.

header {
  background-color: rgb(0, 0, 0); /* black */
}

footer {
  background-color: rgba(0, 0, 0, 0.5); /* black with 50% opacity */
}

HSL / HSLa

Innym sposobem zadeklarowania koloru jest użycie HSL lub HSLa i jest podobny do RGB i RGBa.

HSL oznacza odcień, nasycenie i lekkość, i często jest również nazywany HLS:

• Barwa to stopień na kole kolorów (od 0 do 360).
• Nasycenie to procent od 0% do 100%.
• Lekkość stanowi również procent od 0% do 100%.

HSLa umożliwia dodanie dodatkowego parametru alfa między 0,0 a 1,0 w celu zdefiniowania krycia.

li a {
  background-color: hsl(120, 100%, 50%); /* green */
}

#p1 {
  background-color: hsla(120, 100%, 50%, .3); /* green with 30% opacity */
}

Interakcja z obrazem tła

Wszystkie poniższe oświadczenia są równoważne:

body {
  background: red;
  background-image: url(partiallytransparentimage.png);
}

body {
  background-color: red;
  background-image: url(partiallytransparentimage.png);
}

body {
  background-image: url(partiallytransparentimage.png);
  background-color: red;
}

body {
  background: red url(partiallytransparentimage.png);
}

Doprowadzą one do pokazania czerwonego koloru pod obrazem, gdzie części obrazu są przezroczyste lub obraz nie jest wyświetlany (być może w wyniku background-repeat ).

Należy pamiętać, że następujące elementy nie są równoważne:

body {
  background-image: url(partiallytransparentimage.png);
  background: red;
}

Tutaj wartość background przesłania background-image .

Aby uzyskać więcej informacji na temat właściwości background , zobacz Skrót w tle

Zdjęcie w tle

Właściwość background-image służy do określenia obrazu tła, który zostanie zastosowany do wszystkich dopasowanych elementów. Domyślnie ten obraz jest kafelkowy, aby objąć cały element, z wyjątkiem marginesu.

.myClass {
  background-image: url('/path/to/image.jpg');
}

Aby użyć wielu obrazów jako background-image , zdefiniuj url() oddzielony przecinkami

.myClass {
  background-image: url('/path/to/image.jpg'),
                    url('/path/to/image2.jpg');
}

Obrazy zostaną ułożone w stos zgodnie z ich kolejnością, z pierwszym zadeklarowanym obrazem na innych i tak dalej.

Więcej CSS dla obrazu tła

Poniższe atrybuty są bardzo przydatne i prawie niezbędne.

background-size:     xpx ypx | x% y%;
background-repeat:   no-repeat | repeat | repeat-x | repeat-y;
background-position: left offset (px/%) right offset (px/%) | center center | left top | right bottom;

Gradienty w tle

Gradienty to nowe typy obrazów, dodane w CSS3. Jako obraz gradienty są ustawiane za pomocą właściwości background-image lub skrótu background .

Istnieją dwa rodzaje funkcji gradientu: liniowy i radialny. Każdy typ ma wariant powtarzalny i wariant powtarzalny:

• linear-gradient()
• repeating-linear-gradient()
• radial-gradient()
• repeating-radial-gradient()

gradient liniowy()

linear-gradient ma następującą składnię

background: linear-gradient( <direction>?, <color-stop-1>, <color-stop-2>, ...);

Na przykład tworzy to gradient liniowy, który zaczyna się od prawej i przechodzi z czerwonego na niebieski

.linear-gradient {
  background: linear-gradient(to left, red, blue); /* you can also use 270deg */
}

Możesz utworzyć gradient diagonal , deklarując poziomą i pionową pozycję początkową.

.diagonal-linear-gradient {
  background: linear-gradient(to left top, red, yellow 10%);
}

Można określić dowolną liczbę punktów przejścia koloru w gradiencie, oddzielając je przecinkami. Poniższe przykłady utworzą gradient z 8 punktami koloru

.linear-gradient-rainbow {
  background: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet)
}

gradient radialny ()

.radial-gradient-simple {
  background: radial-gradient(red, blue);
}

.radial-gradient {
  background: radial-gradient(circle farthest-corner at top left, red, blue);
}

Powtarzające się gradienty

Powtarzające się funkcje gradientu przyjmują te same argumenty, co powyższe przykłady, ale umieszczają gradient na tle elementu.

.bullseye {
  background: repeating-radial-gradient(red, red 10%, white 10%, white 20%);
}
.warning {
  background: repeating-linear-gradient(-45deg, yellow, yellow 10%, black 10%, black 20% );
}

Należy pamiętać, że zamiast nazw kolorów można stosować kody kolorów HEX, RGB, RGBa, HSL i HSLa. Nazwy kolorów zostały użyte w celu ilustracji. Zauważ też, że składnia gradientu radialnego jest znacznie bardziej złożona niż gradient liniowy, a tutaj pokazano uproszczoną wersję. Aby uzyskać pełne wyjaśnienie i specyfikacje, zobacz Dokumenty MDN

Stenografia w tle

Za pomocą właściwości background można ustawić jedną lub więcej właściwości związanych z tłem:

Kolejność wartości nie ma znaczenia, a każda wartość jest opcjonalna

Składnia

Składnia deklaracji skróconej tła jest następująca:

background: [<background-image>] [<background-color>]  [<background-position>]/[<background-size>] [<background-repeat>] [<background-origin>] [<background-clip>] [<background-attachment>] [<initial|inherit>];  

Przykłady

background: red;

Wystarczy ustawić background-color za pomocą red wartości.

background: border-box red;

Ustawienie background-clip na obramowanie i background-color na czerwony.

background: no-repeat center url("somepng.jpg");

Ustawia background-repeat na brak powtarzania, background-origin na środek i obraz background-image na obrazie.

background: url('pattern.png') green;

W tym przykładzie background-color elementu zostałby ustawiony na green pomocą pattern.png , jeśli jest dostępny, nakładany na kolor, powtarzający się tak często, jak to konieczne, aby wypełnić element. Jeśli pattern.png zawiera jakąś przezroczystość, wówczas green kolor będzie widoczny za nią.

background: #000000 url("picture.png") top left / 600px auto no-repeat;

W tym przykładzie mamy czarne tło z obrazem „picture.png” u góry, obraz nie powtarza się w żadnej osi i jest umieszczony w lewym górnym rogu. Pozycja / po ma być w stanie uwzględnić rozmiar obrazu tła, który w tym przypadku jest ustawiony na szerokość 600px i automatyczny dla wysokości. Ten przykład może działać dobrze z obrazem funkcji, który może zanikać do jednolitego koloru.

UWAGA: Użycie skróconej właściwości tła resetuje wszystkie wcześniej ustawione wartości właściwości tła, nawet jeśli nie podano wartości. Jeśli chcesz zmodyfikować tylko wcześniej ustawioną wartość właściwości tła, użyj zamiast tego właściwości długiej ręki.

Pozycja w tle

Właściwość background-position służy do określenia pozycji początkowej obrazu tła lub gradientu

.myClass {
  background-image: url('path/to/image.jpg');
  background-position: 50% 50%;
}

Pozycja jest ustalana za pomocą współrzędnych X i Y i ustawiana za pomocą dowolnej jednostki używanej w CSS.

Jednostki w CSS można określić różnymi metodami (patrz tutaj ).

Właściwości pozycji tła długiej dłoni

Oprócz powyższej właściwości skrótu można także użyć właściwości background-position-x długiej dłoni background-position-x i background-position-y . Umożliwiają one osobne sterowanie pozycjami x lub y.

UWAGA: Ta funkcja jest obsługiwana we wszystkich przeglądarkach oprócz Firefox (wersje 31–48) 2 . Firefox 49, który zostanie wydany we wrześniu 2016 r., Będzie obsługiwał te właściwości. Do tego czasu w odpowiedzi na przepełnienie stosu jest włamanie do Firefoksa.

Załącznik w tle

Właściwość background-attach ustawia, czy obraz w tle jest stały, czy przewija się wraz z resztą strony.

body { 
  background-image: url('img.jpg');
  background-attachment: fixed;
}

Przykłady

załącznik w tle: przewiń

Domyślne zachowanie podczas przewijania ciała powoduje przewijanie tła:

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

załącznik tła: naprawiony

Obraz w tle zostanie naprawiony i nie będzie się poruszał, gdy ciało zostanie przewinięte:

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

załącznik w tle: lokalny

Obraz tła div będzie przewijany, gdy zawartość div będzie przewijana.

div {
  background-image: url('image.jpg');
  background-attachment: local;
}

powtarzanie tła

Właściwość background-repeat ustawia, czy / jak obraz tła będzie powtarzany.

Domyślnie obraz tła jest powtarzany zarówno pionowo, jak i poziomo.

div {
  background-image: url("img.jpg");
  background-repeat: repeat-y;
}

Oto jak wygląda background-repeat: repeat-y w background-repeat: repeat-y :

Kolor tła z kryciem

Jeśli ustawisz opacity elementu, wpłynie on na wszystkie jego elementy potomne. Aby ustawić krycie tylko na tle elementu, musisz użyć kolorów RGBA. Poniższy przykład będzie miał czarne tło z kryciem 0,6.

/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);

/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);

/* For IE 5.5 - 7*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);

/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";

Wiele obrazów tła

W CSS3 możemy układać wiele tła w tym samym elemencie.

#mydiv {
  background-image: url(img_1.png), /* top image */
                    url(img_2.png), /* middle image */
                    url(img_3.png); /* bottom image */
  background-position: right bottom,
                       left top,
                       right top;
  background-repeat: no-repeat,
                     repeat,
                     no-repeat;
}

Obrazy będą układane jeden na drugim, z pierwszym tłem u góry i ostatnim tłem z tyłu. img_1 będzie na górze, img_2 i img_3 na dole.

Możemy również użyć do tego skróconej właściwości tła:

#mydiv {
  background: url(img_1.png) right bottom no-repeat,
              url(img_2.png) left top repeat,
              url(img_3.png) right top no-repeat;
}

Możemy również układać obrazy i gradienty:

#mydiv {
  background: url(image.png) right bottom no-repeat,
              linear-gradient(to bottom, #fff 0%,#000 100%);
}

• Próbny

Właściwość pochodzenia tła

Właściwość pochodzenia tła określa położenie obrazu tła.

Uwaga: Jeśli właściwość background-attachment jest ustawiona na fixed , ta właściwość nie ma wpływu.

Wartość domyślna: padding-box

Możliwa wartość:

• padding-box - Pozycja odnosi się do padding-box
• border-box - Pozycja odnosi się do ramki granicznej
• content-box - Pozycja jest względna do pola zawartości
• initial
• inherit

CSS

.example {
  width: 300px;
  border: 20px solid black;
  padding: 50px;
  background: url(https://static.pexels.com/photos/6440/magazines-desk-work-workspace-medium.jpg);
  background-repeat: no-repeat;
}

.example1 {}

.example2 { background-origin: border-box; }

.example3 { background-origin: content-box; }

HTML

<p>No background-origin (padding-box is default):</p>

<div class="example example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: border-box:</p>
<div class="example example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: content-box:</p>
<div class="example example3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

Wynik:

Więcej:

https://www.w3.org/TR/css3-background/#the-background-origin

https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin

Klip w tle

Definicja i zastosowanie: Właściwość background-clip określa obszar malowania tła.

Wartość domyślna: border-box

Wartości

• border-box jest wartością domyślną. Pozwala to na rozciągnięcie tła do zewnętrznej krawędzi granicy elementu.
• padding-box zaczepia tło na zewnętrznej krawędzi dopełnienia elementu i nie pozwala mu sięgać do granicy;
• content-box przycina tło na krawędzi pola zawartości.
• inherit stosuje ustawienie elementu nadrzędnego do wybranego elementu.

CSS

.example {
  width: 300px;
  border: 20px solid black;
  padding: 50px;
  background: url(https://static.pexels.com/photos/6440/magazines-desk-work-workspace-medium.jpg);
  background-repeat: no-repeat;
}

.example1 {}

.example2 { background-origin: border-box; }

.example3 { background-origin: content-box; }

HTML

<p>No background-origin (padding-box is default):</p>

<div class="example example1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: border-box:</p>
<div class="example example2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

<p>background-origin: content-box:</p>
<div class="example example3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

Rozmiar tła

Przegląd ogólny

Właściwość background-size umożliwia kontrolowanie skalowania obrazu background-image . Zajmuje do dwóch wartości, które określają skalę / rozmiar uzyskanego obrazu w kierunku pionowym i poziomym. Jeśli właściwości nie ma, jej width jest uznawana za auto zarówno pod względem width jak i height .

auto zachowa proporcje obrazu, jeśli można to ustalić. Wysokość jest opcjonalna i można ją uznać za auto . Dlatego na obrazie o wymiarach 256 x 256 pikseli wszystkie poniższe ustawienia background-size dają obraz o wysokości i szerokości 50 pikseli:

background-size: 50px;
background-size: 50px auto; /* same as above */
background-size: auto 50px;
background-size: 50px 50px;

Więc jeśli zaczniemy od następującego zdjęcia (które ma wspomniany rozmiar 256 px × 256 px),

skończymy z 50 pikseli × 50 pikseli na ekranie użytkownika, zawartym w tle naszego elementu:

Można również użyć wartości procentowych do skalowania obrazu względem elementu. Poniższy przykład dałby obraz o wymiarach 200 × 133 pikseli:

#withbackground {
    background-image: url(to/some/background.png);

    background-size: 100% 66%;
    
    width: 200px;
    height: 200px;

    padding: 0;
    margin: 0;
}

Zachowanie zależy od background-origin .

Utrzymanie proporcji

Ostatni przykład w poprzedniej sekcji utracił swój pierwotny współczynnik kształtu. Koło wpadło w elipsę, kwadrat w prostokąt, trójkąt w inny trójkąt.

Podejście długości lub procentu nie jest wystarczająco elastyczne, aby utrzymać proporcje przez cały czas. auto nie pomaga, ponieważ możesz nie wiedzieć, który wymiar twojego elementu będzie większy. Jednak, aby całkowicie pokryć niektóre obszary obrazem (i mieć poprawny współczynnik kształtu) lub aby obraz o poprawnym współczynniku kształtu był całkowicie w obszarze tła, wartości, contain i cover zapewniają dodatkową funkcjonalność.

Eggsplanation contain i cover

Przepraszam za kiepską kalamburę, ale do demonstracji wykorzystamy zdjęcie dnia autorstwa Biswarupa Ganguly . Powiedzmy, że to jest twój ekran, a szary obszar znajduje się poza twoim widocznym ekranem. Dla celów demonstracyjnych założymy współczynnik 16 x 9.

Chcemy wykorzystać wspomniane zdjęcie dnia jako tło. Jednak z jakiegoś powodu przycięliśmy obraz do 4x3. Możemy ustawić właściwość background-size na pewną stałą długość, ale skupimy się na contain i cover . Zauważ, że zakładam również, że nie zmieniliśmy szerokości i / lub wysokości body .

contain

contain

Skaluj obraz, zachowując jego wewnętrzny współczynnik kształtu (jeśli istnieje), do największego rozmiaru, tak aby zarówno jego szerokość, jak i wysokość mieściły się w obszarze pozycjonowania tła.

Dzięki temu obraz tła jest zawsze całkowicie zawarty w obszarze pozycjonowania tła, jednak w tym przypadku może być pusta przestrzeń wypełniona background-color :

cover

cover

Skaluj obraz, zachowując jego wewnętrzny współczynnik kształtu (jeśli istnieje), do najmniejszego rozmiaru, tak aby zarówno jego szerokość, jak i wysokość mogły całkowicie pokryć obszar pozycjonowania tła.

Dzięki temu obraz tła pokrywa wszystko. Nie będzie widocznego background-color , jednak w zależności od proporcji ekranu duża część obrazu może zostać odcięta:

Demonstracja z rzeczywistym kodem

div > div {
  background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ccc;
  border: 1px solid;
  width: 20em;
  height: 10em;
}
div.contain {
  background-size: contain;
}
div.cover {
  background-size: cover;
}
/********************************************
 Additional styles for the explanation boxes 
*********************************************/

div > div {
  margin: 0 1ex 1ex 0;
  float: left;
}
div + div {
  clear: both;
  border-top: 1px dashed silver;
  padding-top:1ex;
}
div > div::after {
  background-color: #000;
  color: #fefefe;
  margin: 1ex;
  padding: 1ex;
  opacity: 0.8;
  display: block;
  width: 10ex;
  font-size: 0.7em;
  content: attr(class);
}

<div>
  <div class="contain"></div>
  <p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
  </p>
</div>
<div>
  <div class="cover"></div>
  <p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code>&lt;div&gt;</code>.</p>
</div>

Właściwość trybu mieszania tła

.my-div {
    width: 300px;
    height: 200px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: linear-gradient(to right, black 0%,white 100%), url('https://static.pexels.com/photos/54624/strawberry-fruit-red-sweet-54624-medium.jpeg');
    background-blend-mode:saturation;
}

<div class="my-div">Lorem ipsum</div>

Zobacz wynik tutaj: https://jsfiddle.net/MadalinaTn/y69d28Lb/

Składnia CSS: tryb mieszania tła: normalny | pomnóż | ekran | nakładka | przyciemnić | rozjaśnić | unikanie kolorów | nasycenie | kolor | jasność;