Jaka jest różnica między tłem a kolorem tła


273

Jaka jest różnica między określaniem koloru tła za pomocą backgroundi background-color?

Fragment nr 1

body { background-color: blue; }

Fragment nr 2

body { background: blue; }

Odpowiedzi:


257

Przepowiadając, że są to dwie odrębne właściwości, w twoim konkretnym przykładzie nie ma różnicy w wyniku, ponieważ backgroundtak naprawdę jest to skrót

tło-kolor
tło-obraz
tło-pozycja
tło-powtórz
tło-załącznik
tło-klip
tło-pochodzenie
tło tło-tło tło-rozmiar

Tak więc, oprócz background-color, używając backgroundskrótu można też dodać jedną lub więcej wartości bez powtarzania każdy inny background-* mienia więcej niż jeden raz.

Wybór tego zależy zasadniczo od Ciebie, ale może również zależeć od określonych warunków deklaracji stylu (np. Jeśli chcesz zastąpić tylko background-colordziedziczenie innych powiązanych background-*właściwości z elementu nadrzędnego lub jeśli musisz usunąć wszystkie wartości z wyjątkiem background-color).


Czy backgroundto tylko skrót do któregoś z 5 atrybutów? Dlatego nie jest praktyczny w prawdziwym życiu, jeśli występuje pozycja tła, kolor i obraz?
stanigator 18.04.

16
Jest to bardzo praktyczne, ponieważ możesz określić wszystkie te atrybuty w jednym wierszu . Odwołaj się do oficjalnej dokumentacji
Christian

3
jest różnica. Mam div z przezroczystymi przerwami między elementami potomnymi, gdy używam koloru tła. ale jest całkowicie solidny, gdy używam tylko tła. istnieje możliwa do zweryfikowania różnica w ich właściwościach lub zachowaniu.
user1873073,

2
Fwiw, z linku @ ChristianVarga: Właściwość „background” jest skrótową właściwością służącą do ustawiania indywidualnych właściwości tła (tj. „Kolor tła”, „obraz tła”, „powtórzenie tła”, „załącznik tła” i „ background-position ”) w tym samym miejscu w arkuszu stylów. Biorąc pod uwagę poprawną deklarację, właściwość „background” najpierw ustawia wszystkie indywidualne właściwości tła na ich wartości początkowe, a następnie przypisuje wyraźne wartości podane w deklaracji. Podany przykład:P { background: url("chess.png") gray 50% repeat fixed }
ruffin


157

backgroundbędzie zastępują wszystkie poprzednie background-color, background-imageitd specyfikacji. Zasadniczo jest to skrót, ale także reset .

Czasami użyję go do zastąpienia poprzednich backgroundspecyfikacji w dostosowaniach szablonów, w których chciałbym:

background: white url(images/image1.jpg) top left repeat;

być następujące:

background: black;

Tak więc, wszystkie parametry ( background-image, background-position, background-repeat) zostaną przywrócone do wartości domyślnych.


12
To jest bardziej kompletna odpowiedź, część resetowania jest bardzo ważną różnicą.
Draken

1
developer.mozilla.org/en-US/docs/Web/CSS/background -> Podobnie jak w przypadku wszystkich właściwości skróconych css, wszelkie pominięte pod-wartości zostaną ustawione na ich wartość początkową> obraz tła: brak pozycja tła: 0% 0% rozmiar tła: automatyczne automatyczne powtarzanie tła: powtórz pochodzenie tła: padding-box tło-klip: obramowanie-załącznik-tło: przewiń kolor tła: przezroczysty
MarcoZen

85

O wydajności CSS :

backgroundvs background-color:

Porównanie 18 próbek kolorów renderowanych 100 razy na stronie jako małe prostokąty, raz z tłem i raz z kolorem tła .

Tło a kolor tła

Chociaż liczby te pochodzą z przeładowania jednej strony, kolejne odświeżenia zmieniły czasy renderowania, ale różnica procentowa była zasadniczo taka sama za każdym razem.

To oszczędność prawie 42,6 ms, prawie dwa razy szybciej , gdy używasz tła zamiast koloru tła w Safari 7.0.1. Chrome 33 wydaje się być mniej więcej taki sam.

To szczerze mnie zaskoczyło, ponieważ przez najdłuższy czas z dwóch powodów:

  • Zwykle zawsze opowiadam się za jawnością we właściwościach CSS, szczególnie w tle, ponieważ może to negatywnie wpłynąć na specyficzność na drodze.
  • Myślałem, że kiedy przeglądarka zobaczy background: #000;, to naprawdę zobaczą background: #000 none no-repeat top center;. Nie mam tutaj linku do zasobu, ale pamiętam, że gdzieś to przeczytałem.

Ref: https://github.com/mdo/css-perf#background-vs-background-color


13
Przybyłem tu po to - naprawdę bardzo zaskoczony wynikami. Dziękuję za tę odpowiedź.
Mave

Czy możesz również powiedzieć, że wszystkie skrócone skróty CSS są bardziej preferowane ze względu na lepszą wydajność?
Levent Divilioglu

5
@LeventDivilioglu Jak powiedział tester: These kind of tests are cheats and always going to be somewhat inaccurate from the real world github.com/mdo/css-perf#updated-conclusion-from-averages
l2aelba

24

Za pomocą backgroundmożesz ustawić wszystkie backgroundwłaściwości, takie jak:

  • background-color
  • background-image
  • background-repeat
  • background-position
    itp.

Za pomocą background-colormożesz po prostu określić kolor tła

background: url(example.jpg) no-repeat center center #fff;

VS.

background-image: url(example.jpg);
background-position: center center;
background-repeat: no-repeat;
background-color: #fff;

Więcej informacji

(Patrz Podpis: Tło - właściwość Stenografia)



3

Oba są takie same. Istnieje wiele selektorów tła (czyli background-color, background-image, background-position) i można uzyskać do nich dostęp za pośrednictwem prostszej backgroundselektora lub bardziej szczegółowego. Na przykład:

background: blue url(/myImage.jpg) no-repeat;

lub

background-color: blue;
background-image: url(/myImage.jpg);
background-repeat: no-repeat;

3

Różnica polega na tym, że backgroundwłaściwość stenografii ustawia kilka właściwości związanych z tłem. Wyznacza je wszystkie, nawet jeśli tylko podać przykład wartość koloru, ponieważ wtedy pozostałe właściwości są ustawione do wartości początkowej, np background-imagedo none.

Nie oznacza to, że zawsze nadpisuje wszelkie inne ustawienia dla tych właściwości. Zależy to od kaskady zgodnie ze zwykłymi, niezrozumianymi zasadami.

W praktyce stenografia jest nieco bezpieczniejsza. Jest to środek ostrożności (niepełny, ale przydatny) przed przypadkowym uzyskaniem nieoczekiwanych właściwości tła, takich jak obraz tła, z innego arkusza stylów. Poza tym jest krótszy. Musisz jednak pamiętać, że tak naprawdę oznacza to „ustaw wszystkie właściwości tła”.


2

Nie ma różnicy. Oba będą działać w ten sam sposób.

Właściwości tła CSS służą do definiowania efektów tła elementu.

Właściwości CSS używane do efektów tła:

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

Właściwość tła obejmuje wszystkie te właściwości i można je po prostu zapisać w jednym wierszu.


1

To najlepsza odpowiedź. Stenografia (tło) służy do resetowania i OSUSZANIA (w połączeniu z długą ręką).


1

Porównanie 18 próbek kolorów renderowanych 100 razy na stronie jako małe prostokąty, raz z tłem i raz z kolorem tła.

Odtworzyłem eksperyment dotyczący wydajności CSS, a wyniki są obecnie znacznie różne.

background

Chrome 54 : 443 (µs / div)

Firefox 49 : 162 (µs / div)

Edge 10 : 56 (µs / dz.)

background-color

Chrome 54 : 449 (µs / div)

Firefox 49 : 171 (µs / div)

Edge 10 : 58 (µs / dz.)

Jak widać - prawie nie ma różnicy.


1

backgroundto skrót do background-colorkilku innych elementów związanych z tłem, jak poniżej:

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

Przeczytaj poniższe oświadczenie z W3C:

Tło - własność Stenografia

Aby skrócić kod, możliwe jest również określenie wszystkich właściwości tła w jednej pojedynczej właściwości. Nazywa się to własnością stenograficzną.

Skróconą właściwością tła jest tło:

body {
  background: white url("img_tree.png") no-repeat right top;
}

Podczas korzystania ze skróconej właściwości kolejność wartości właściwości jest następująca:

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

Nie ma znaczenia, czy brakuje jednej z wartości właściwości, o ile pozostałe są w tej kolejności.


1

Odkryłem, że nie można ustawić gradientu z kolorem tła.

To działa:

background:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));

To nie:

background-color:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));

1

background jest skrótową właściwością dla:

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

Można Szczegółowe informacje o każdej nieruchomości tutaj

Kolejność właściwości

W większości implementacji przeglądarki (myślę, że starsza przeglądarka może powodować problemy) kolejność właściwości nie ma znaczenia, z wyjątkiem:

  • background-originoraz background-clip: gdy obie te właściwości są obecne, pierwsza odnosi się do, -origina druga do -clip.

    Przykład:

    background: content-box green padding-box;

    Jest równa:

    background-origin: content-box;
    background-color: green;
    background-clip: padding-box;
  • background-sizemusi zawsze następować, background-positiona właściwości muszą być oddzielone/

  • jeśli background-positionskłada się z dwóch liczb, pierwsza to wartość pozioma, a druga wartość pionowa.


0

Zauważyłem podczas generowania wiadomości e-mail dla programu Outlook ...

/*works*/
background: gray;

/*does not work*/
background-color: gray;

0

Możesz zrobić porządne rzeczy, gdy zrozumiesz, że możesz w ten sposób grać z dziedziczeniem. Jednak najpierw zrozummy coś z tego dokumentu w tle:

Dzięki CSS3 możesz zastosować wiele elementów do elementów. Są one ułożone warstwami jeden na drugim, z pierwszym tłem, które podajesz na górze, a ostatnim tłem wymienionym z tyłu. Tylko ostatnie tło może zawierać kolor tła.

Kiedy więc:

background: red;

Ustawia kolor tła na czerwony, ponieważ czerwony jest ostatnią wymienioną wartością.

Kiedy się robi:

background: linear-gradient(to right, grey 50%, yellow 2%) red;

Czerwony jest kolorem tła, ALE zobaczysz gradient.

    .box{
        border-radius: 50%;
        width: 200px;
        height: 200px;
        background: linear-gradient(to right, grey 50%, yellow 2%) red;
    }

    .box::before{
       content: "";
       display: block;
       margin-left: 50%;
       height: 50%;
       border-radius: 0 100% 100% 0 / 50%;
       transform: translateX(70px) translateY(-26px) rotate(325deg);
       background: inherit;
    }
    <div class="box">
      
     </div>

Teraz to samo z kolorem tła:

    .box{
        border-radius: 50%;
        width: 200px;
        height: 200px;
        background: linear-gradient(to right, grey 50%, yellow 2%) red;
    }

    .box::before{
       content: "";
       display: block;
       margin-left: 50%;
       height: 50%;
       border-radius: 0 100% 100% 0 / 50%;
       transform: translateX(70px) translateY(-26px) rotate(325deg);
       background-color: inherit;
    }
    <div class="box">
      
     </div>

Powodem tego jest to, że kiedy to robimy:

background: linear-gradient(to right, grey 50%, yellow 2%) #red;

Ostatnia liczba określa kolor tła.

Wcześniej dziedziczymy po tle (wtedy otrzymujemy gradient) lub kolorze tła, a potem robimy się czerwony.


-2

Zauważyłem jedną rzecz, której nie widzę w dokumentacji background: url("image.png")

krótka ręka, jak wyżej, jeśli obraz nie zostanie znaleziony, zamiast kodu ignorowanego zostanie wysłany kod 302, tak jak w przypadku użycia

background-image: url("image.png") 

-2

Występuje błąd związany z tłem i kolorem tła

różnica polega na tym, że podczas korzystania z tła, czasami podczas tworzenia strony internetowej w tle CSS: #fff // może przesłonić blok obrazu maski („najwyższy element, tekst lub obraz”)), więc lepiej zawsze używać tła- kolor do bezpiecznego użytkowania, w swoim projekcie, jeśli jest indywidualny


Przepraszam, że to nie ma sensu. Czy możesz zredagować swoją odpowiedź, aby opracować więcej na ten temat?
Syfer
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.