фон: нет по сравнению с фоном: прозрачный в чем разница?

Есть ли разница между этими двумя свойствами CSS:

background: none;
background: transparent;
  1. Они оба действительны?
  2. Какой из них следует использовать и почему?

Ответ 1

Между ними нет никакой разницы.

Если вы не укажете значение для любого из полудюжины свойств, для которого background является сокращением, то оно будет установлено по умолчанию. none и transparent являются значениями по умолчанию.

Один явно устанавливает background-image в none и неявно устанавливает background-color в transparent. Другой - наоборот.

Ответ 2

Как дополнительная информация о @Quentin, и, как он правильно говорит, background Свойство CSS, является сокращением для:

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

Это означает, что вы можете группировать все стили в одном, например:

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

Это будет (в этом примере):

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

Итак... когда вы установили: background:none;
вы говорите, что для всех свойств фона установлено значение none...
Вы говорите, что background-image: none; и все остальные в состоянии initial (поскольку они не объявляются).
Итак, background:none;:

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

Теперь, когда вы определяете только цвет (в вашем случае transparent), вы в основном говорите:

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

Повторяю, так как @Quentin справедливо говорит, что значения default transparent и none в этом случае совпадают, поэтому в вашем примере и в исходном вопросе нет, там между ними нет никакой разницы.

Но!.. если вы скажете background:none Vs background:red, то да... там большая разница, как я уже сказал, первая установила бы все свойства none/default, а вторая, только изменит color и остается остальным в состоянии default.

Итак, кратко:

Короткий ответ: Нет, нет никакой разницы (в вашем примере и оригинальном вопросе)
Длинный ответ. Да, есть большая разница, но напрямую зависит от свойств, предоставленных атрибуту.


Обновление1: Начальное значение (aka default)

Исходное значение - конкатенация начальных значений его свойств longhand:

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

Подробнее background описания здесь


Обновление2: уточните в спецификации background:none;.

Ответ 3

В дополнение к другим ответам: если вы хотите, чтобы reset все свойства фона были отнесены к их начальному значению (включая background-color: transparent и background-image: none) без явного указания любого значения, такого как transparent или none, вы может сделать это, написав:

background: initial;