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

background zastąpi wszystkie poprzednie background-color, background-image, itd. specyfikacje. Jest to w zasadzie skrót, ale reset również.

Czasami będę go używał do nadpisywania poprzednich specyfikacji background w dostosowaniach szablonu, gdzie chciałbym:

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

Być następujące:

background: black;

Więc wszystkie parametry (background-image, background-position, background-repeat) zostaną zresetowane do wartości domyślnych.

About CSS performance:

background vs background-color :

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

Podczas gdy liczby te pochodzą z jednej strony, z kolejnymi odświeża czasy renderowania, ale różnica procentowa była zasadniczo za każdym razem tak samo.

To oszczędność prawie 42,6 ms, prawie dwa razy szybsza, przy użyciu tło zamiast koloru tła w Safari 7.0.1. Chrom 33 wygląda na to samo.

To szczerze mnie rozwaliło, bo najdłużej z dwóch powodów:

• zazwyczaj zawsze argumentuję za jasnością we właściwościach CSS, szczególnie w przypadku tła, ponieważ może to niekorzystnie wpłynąć na specyfikę.
• myślałem, że gdy przeglądarka widzi background: #000;, oni naprawdę widzą background: #000 none no-repeat top center;. Nie mam tu linka do jakiegoś zasobu, ale przypominam sobie, że gdzieś to czytałem.

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

Z background możesz ustawić wszystkie background właściwości takie jak:

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

Za pomocą background-color moż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

(Zobacz podpis: Background - shorthand property)

Jedna z różnic:

Jeśli używasz obrazka jako tła w ten sposób:

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

Wtedy nie można go nadpisać właściwością "background-color".

Ale jeśli używasz tła do zastosowania koloru, jest on taki sam jak kolor tła i może być przesłonięty.

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

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

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

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

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

Właściwość tła zawiera wszystkie te właściwości i można je po prostu zapisać w jednej linii.

Obie są takie same. Istnieje wiele selektorów tła (np. background-color, background-image, background-position) możesz uzyskać do nich dostęp poprzez prostszy selektor background lub bardziej szczegółowy. 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 właściwość background Stenografia ustawia kilka właściwości związanych z tłem. Ustawia je wszystkie, nawet jeśli podasz tylko np. wartość koloru, ponieważ wtedy pozostałe właściwości zostaną ustawione na ich początkowe wartości, np. background-image na none.

Nie oznacza to, że zawsze nadpisuje inne ustawienia dla tych właściwości. To zależy od kaskady zgodnie ze zwykłymi, ogólnie źle zrozumianymi zasadami.

W praktyce, Skrót wydaje się być nieco bezpieczniej. Jest to zabezpieczenie (nie kompletne, ale użyteczne) 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. Ale musisz pamiętać, że to naprawdę oznacza "ustaw wszystkie właściwości tła".

To najlepsza odpowiedź. Shorthand (tło) jest dla reset i suche (połączyć z longhand).

Porównanie 18 próbek kolorów wyświetlonych 100 razy na stronie jako małe prostokąty, raz z tłem i raz z tłem-kolor.

Odtworzyłemwydajność CSS eksperyment i wyniki są znacznie różne w dzisiejszych czasach.

background

Chrome 54 : 443 (µs/div)

Firefox 49: 162 (µs/div)

Edge 10 : 56 (µs/div)

background-color

Chrome 54 : 449 (µs/div)

Firefox 49 : 171 (µs/div)

Edge 10 : 58 (µs/div)

Jak widzisz-nie ma prawie żadnej różnicy.

background jest skrótem dla background-color i kilku innych rzeczy związanych z tłem, jak poniżej:

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

Przeczytaj poniższą wypowiedź z W3C:

Background-shorthand property

aby skrócić kod, jest możliwe jest również określenie wszystkich właściwości tła w jednym własność. To się nazywa właściwość stenograficzna.

Właściwością skrótu dla tła jest background:

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

Przy użyciu właściwości shorthand kolejność wartości właściwości to:

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 tak jak pozostałe w tej kolejności.

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

/*works*/
background: gray;

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

Możesz zrobić całkiem porządne rzeczy, gdy zrozumiesz, że możesz bawić się dziedziczeniem za pomocą tego. Jednak najpierw zrozummy coś z tego doc na tle:

Z CSS3, można zastosować wiele tła do elementów. Są to nakładane na siebie warstwy z pierwszym tłem, które podajesz na wierzchu i ostatnie tło wymienione z tyłu. Tylko ostatnie tło może zawierać kolor tła.

Więc kiedy JEDEN do:

background: red;

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

Gdy ktoś robi:

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

Czerwony jest znowu 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 background-color:

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

Dzieje się tak dlatego, że kiedy robimy to:

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

Ostatnia liczba ustawia tło-kolor.

Następnie w przed dziedziczymy z tła (wtedy otrzymujemy gradient) lub kolor tła, wtedy otrzymujemy czerwony.

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

Jest błąd dotyczący tła i koloru tła

Różnica tego, podczas korzystania z tła, czasami podczas tworzenia strony internetowej w CSS background: # fff / / można przejechać blokiem obrazu Maski ("górny element, tekst lub obraz")) więc lepiej zawsze używać koloru tła do bezpiecznego użytkowania, w projekcie, jeśli jego indywidualny

Jedna rzecz, której nie widzę w dokumentacji, to używanie background: url("image.png")

Krótka ręka jak powyżej jeśli obrazek nie zostanie znaleziony wysyła kod 302 zamiast być ignorowanym jak jest, jeśli używasz

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