фон: немає проти тла: прозорий, в чому різниця?


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;б явно було написано.
Квентін

Отже, ви говорите, що "початкове" значення властивості (яке використовується для невизначених властивостей) перевизначає навіть таблиці стилів агентів користувача? Чи є у вас якісь довідки?
герман

Таблиці стилів агентів користувача реалізують специфікацію, яка визначає початкове значення властивості цих властивостей як 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;
ви говорите, що всі фонові властивості встановлені на жодні ...
Ви говорите про це, 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;специфікацію.


thx для відповіді, які значення за замовчуванням для фонового зображення, повторення фону ...? вони залежать від браузера? Якщо я розумію ваше пояснення, краще скористатися фоном: жодне, тому жодне значення не встановлено за замовчуванням?
web-tiki

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

коли ви встановите: background: none; ви говорите, що всі фонові властивості встановлені на жодні ... Чи не спосіб сказати неправильно
DaniP

2
+1, це повинна бути прийнята відповідь (якщо вона правильна).
Пейсьєр

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.