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


119

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

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

Ответы:


111

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

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

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


2
@herman - Нет, не могут. Это то же самое, что и background-color: transparent; background-image: none;. Таблица стилей пользователя может переопределить одно или оба этих значения, но это будет сделано точно так, как если бы background-color: transparent; background-image: none;они были написаны явно.
Квентин,

Итак, вы говорите, что «начальное» значение свойства (которое используется для неопределенных свойств) переопределяет даже таблицы стилей пользовательского агента? У вас есть ссылка?
Herman

Таблицы стилей пользовательского агента реализуют спецификацию, которая определяет начальное значение этих свойств как transparentи none.
Квентин,

63

В качестве дополнительной информации к ответу @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:noneVs, 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;спецификацию.


спасибо за ответ, какие значения по умолчанию для фонового изображения, повторения фона ...? они зависят от браузера? Если я понимаю ваше объяснение, лучше использовать background: none, поэтому ни одно из значений не установлено по умолчанию?
web-tiki

Вы пробовали то, что публикуете? Все ли значения не установлены? Посмотрите consoleэту демонстрацию jsfiddle.net/dnzy2/6
DaniP

при установке: background: none; вы говорите, что для всех свойств фона установлено значение «Нет» ... Это не способ сказать неправильно
DaniP

2
+1, это должен быть принятый ответ (если он правильный).
Pacerier 08

7

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

background: initial;

5
Будьте осторожны, IE не поддерживает initial. см. Могу ли я использовать и MDN
chharvey
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.