it-swarm.com.ru

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

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

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

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

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

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

100
Quentin

Как дополнительная информация о @ 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, значения defaulttransparent и none в этом случае одинаковы Так что в вашем примере и в вашем первоначальном вопросе нет, между ними нет никакой разницы.

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

Итак вкратце:

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


Upd1: начальное значение (он же default)

Начальное значение конкатенации начальных значений его произвольных свойств:

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 описаний здесь


Upd2: Уточните лучше спецификацию background:none;.

60
gmo

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

background: initial;
7
herman