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

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; }

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).

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.

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 .

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

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)

Jedna z różnic:

Jeśli użyjesz obrazu jako tła w ten sposób:

background: url('Image Path') no-repeat;

nie można go zastąpić właściwością „kolor tła”.

Ale jeśli używasz tła do zastosowania koloru, jest on taki sam jak kolor tła i może zostać zastąpiony.

np .: http://jsfiddle.net/Z57Za/11/ i http://jsfiddle.net/Z57Za/12/

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;

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”.

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.

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

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.

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.

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));

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.

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

/*works*/
background: gray;

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

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.

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") 

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