background: none vs background: transparent Jaka jest różnica?

Czy istnieje różnica między tymi dwoma właściwościami CSS:

background: none;
background: transparent;

1. Czy oba są ważne?
2. Którego należy użyć i dlaczego?

Nie ma między nimi różnicy.

Jeśli nie określisz wartości dla żadnej z pół tuzina właściwości, która backgroundjest skrótem dla, zostanie ustawiona na wartość domyślną. nonei transparentsą wartościami domyślnymi.

One jawnie ustawia background-imageto nonei niejawnie ustawia background-colorto transparent. Drugi jest na odwrót.

Jako dodatkowe informacje na temat odpowiedzi @Quentin i jak słusznie mówi, backgroundsama właściwość CSS jest skrótem dla:

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

Oznacza to, że możesz zgrupować wszystkie style w jednym, na przykład:

background: red url(../img.jpg) 0 0 no-repeat fixed;

To byłoby (w tym przykładzie):

background-color: red;
background-image: url(../img.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;

Więc ... kiedy ustawiasz: background:none;
mówisz, że wszystkie właściwości tła są ustawione na brak ...
Mówisz to background-image: none;i wszystkie inne o initialstanie (ponieważ nie są deklarowane).
Tak więc background:none;jest:

background-color: initial;
background-image: none;
background-repeat: initial;
background-attachment: initial;
background-position: initial;

Teraz, kiedy definiujesz tylko kolor (w twoim przypadku transparent), zasadniczo mówisz:

background-color: transparent;
background-image: initial;
background-repeat: initial;
background-attachment: initial;
background-position: initial;

Powtarzam, ponieważ @Quentin słusznie mówi, że wartości default transparenti w tym przypadku są takie same, więc w twoim przykładzie i w twoim pierwotnym pytaniu nie ma między nimi różnicy.none

Ale! .. jeśli powiesz background:noneVs, background:redto tak ... jest duża różnica, jak powiedziałem, pierwsza ustawiłaby wszystkie właściwości, none/defaulta druga zmieniłaby tylko colori pozostałaby w swoim defaultstanie.

Więc w skrócie:

Krótka odpowiedź : nie, nie ma żadnej różnicy (w twoim przykładzie i oryginalnym pytaniu)
Długa odpowiedź : Tak, jest duża różnica, ale zależy bezpośrednio od właściwości nadanych atrybutowi.

Upd1: Wartość początkowa (aka default)

Wartość początkowa konkatenacja początkowych wartości jej własności odręcznych:

background-image: none
background-position: 0% 0%
background-size: auto auto
background-repeat: repeat
background-origin: padding-box
background-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties
background-clip: border-box
background-color: transparent

Zobacz więcej backgroundopisów tutaj

Aktualizacja2: Lepsze wyjaśnienie background:none;specyfikacji.

Aby uzupełnić inne odpowiedzi: jeśli chcesz zresetować wszystkie właściwości tła do ich wartości początkowej (która obejmuje background-color: transparenti background-image: none) bez jawnego określania wartości, takich jak transparentlub none, możesz to zrobić, pisząc:

background: initial;