Яка різниця між фоном та кольором тла

Яка різниця між визначенням кольору фону за допомогою backgroundта background-color?

Фрагмент №1

body { background-color: blue; }

Фрагмент №2

body { background: blue; }

Припускаючи, що це два різних властивості, у вашому конкретному прикладі різниці в результаті немає, оскільки backgroundнасправді це скорочення для

фон-колір
фон-зображення
фон-позиція
фон-повтор
фон-вкладення
фон-кліп
фон-походження
фон-розмір

Таким чином, крім цього background-color, за допомогою backgroundярлика ви можете також додати одне або більше значень, не повторюючи жодного іншого background-*властивості більше одного разу.

Яку вибрати, по суті, залежить від вас, але це також може залежати від конкретних умов ваших декларацій стилю (наприклад, якщо вам потрібно переосмислити лише ті, хто background-colorуспадковує інші пов'язані background-*властивості з батьківського елемента, або якщо вам потрібно видалити всі значення крім background-color).

backgroundбуде все попередні замінюють background-color, background-imageі т.д. специфікації. В основному це скорочення, але також скидання .

Я іноді використовую його для перезапису попередніх backgroundспецифікацій у налаштуваннях шаблонів, де мені потрібно наступне:

background: white url(images/image1.jpg) top left repeat;

бути наступним:

background: black;

Таким чином, всі параметри ( background-image, background-position, background-repeat) будуть скинуті до значень за замовчуванням.

Про ефективність CSS :

backgroundvs background-color:

Порівняння 18 кольорових зразків, відображених на сторінці 100 разів у вигляді маленьких прямокутників, один раз із фоном та один раз із фоновим кольором .

Незважаючи на те, що ці цифри є з перезавантаження однієї сторінки, з подальшим оновленням час рендерингу змінювався, але відсоткова різниця була в основному однаковою щоразу.

Це економія майже 42,6 мс, майже вдвічі швидша при використанні фону замість кольору фону в Safari 7.0.1. Здається, Chrome 33 приблизно такий самий.

Це чесно здуло мене, бо найдовше з двох причин:

• Зазвичай я завжди заперечую чіткість у властивостях CSS, особливо з фоном, оскільки це може негативно впливати на специфіку в дорозі.
• Я думав, що коли браузер бачить background: #000;, вони дійсно бачать background: #000 none no-repeat top center;. Тут я не маю посилання на ресурс, але я пригадую, що десь це читав.

Посилання: https://github.com/mdo/css-perf#background-vs-background-color

За допомогою нього backgroundможна встановити всі backgroundвластивості на зразок:

• background-color
• background-image
  
• background-repeat
  
• background-position
  тощо.

За допомогою background-colorвас можна просто вказати колір тла

background: url(example.jpg) no-repeat center center #fff;

В.С.

background-image: url(example.jpg);
background-position: center center;
background-repeat: no-repeat;
background-color: #fff;

Більше інформації

(Див. Підпис: Фон - властивість стенограми)

Одна з різниць:

Якщо ви використовуєте зображення як тло таким чином:

background: url('Image Path') no-repeat;

тоді ви не можете її замінити властивістю "color-color".

Але якщо ви використовуєте фон для нанесення кольору, він є таким самим, як фоновий колір, і його можна змінити.

наприклад: http://jsfiddle.net/Z57Za/11/ та http://jsfiddle.net/Z57Za/12/

Вони обоє однакові. Є кілька фонових селектори (тобто background-color, background-image, background-position) , і ви можете отримати до них доступ або через простий backgroundселектор або більше однієї конкретної. Наприклад:

background: blue url(/myImage.jpg) no-repeat;

або

background-color: blue;
background-image: url(/myImage.jpg);
background-repeat: no-repeat;

Різниця полягає в тому, що backgroundвластивість стенограми встановлює кілька властивостей, пов'язаних з фоном. Він встановлює їх усі, навіть якщо ви вказуєте лише, наприклад, значення кольору, оскільки тоді інші властивості встановлюються на їх початкові значення, наприклад, background-imageнаnone .

Це не означає, що воно завжди буде заміняти будь-які інші параметри для цих властивостей. Це залежить від каскаду за звичайними, загалом неправильно зрозумілими правилами.

На практиці скорочення є дещо безпечнішим. Це застереження (не повне, але корисне) від випадкового отримання деяких несподіваних фонових властивостей, таких як фонове зображення, з іншого аркуша стилів. Крім того, він коротший. Але вам потрібно пам’ятати, що це насправді означає «встановити всі фонові властивості».

Різниці немає. Обидва будуть працювати однаково.

Властивості фону CSS використовуються для визначення фонових ефектів елемента.

Властивості CSS, використовувані для фонових ефектів:

• Колір фону
• фонове зображення
• тло-повторити
• фон-вкладення
• фон-позиція

Властивість фону включає всі ці властивості, і ви можете просто записати їх в один рядок.

Це найкраща відповідь. Стенограма (фон) призначена для скидання та СУХОГО (комбінуйте з довгим).

Порівняння 18 кольорових зразків, відображених на сторінці 100 разів у вигляді маленьких прямокутників, один раз із фоном та один раз із фоновим кольором.

Я відтворив експеримент із ефективністю CSS, і результати сьогодні значно відрізняються.

background

Chrome 54 : 443 (µs / div)

Firefox 49 : 162 (µs / div)

Край 10 : 56 (мк / раз)

background-color

Chrome 54 : 449 (µs / div)

Firefox 49 : 171 (µs / div)

Край 10 : 58 (µs / div)

Як бачите - різниці майже немає.

background- це ярлик для background-colorкількох інших матеріалів, пов'язаних із фоном, як показано нижче:

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

Прочитайте заяву нижче від W3C:

Фон - властивість стенограми

Щоб скоротити код, також можна вказати всі фонові властивості в одному властивості. Це називається властивістю скорочення.

Властивість скорочення для фону є фоновим:

body {
  background: white url("img_tree.png") no-repeat right top;
}

При використанні властивості скорочення порядок значень властивості становить:

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

Не має значення, якщо одне з властивостей властивості відсутнє, поки інші в цьому порядку.

Я виявив, що не можна встановити градієнт із кольором тла.

Це працює:

background:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));

Це не так:

background-color:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));

background є скороченим властивістю для наступного:

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

Ви можете отримати детальну інформацію про кожен об'єкт тут

Порядок властивостей

У більшості реалізацій браузера (я думаю, можливо, старший браузер може поставити проблеми) порядок властивостей не має значення, за винятком:

• background-originі background-clip: коли обидва ці властивості є, перший стосується, -originа другий -clip.

  Приклад:

  background: content-box green padding-box;

  Еквівалентний:

  background-origin: content-box;
  background-color: green;
  background-clip: padding-box;

• background-sizeповинні завжди слідувати, background-positionі властивості повинні бути розділені на/

• якщо background-positionскладається з двох чисел, перше - це горизонтальне значення, а друге - вертикальне.

Я помітив при створенні електронних листів для Outlook ...

/*works*/
background: gray;

/*does not work*/
background-color: gray;

Ви можете зробити деякі дуже акуратні речі, як тільки зрозумієте, що можете грати у спадок із цим. Однак спочатку давайте розберемося з цим документом на тлі:

За допомогою CSS3 ви можете застосувати кілька елементів до елементів. Ці шари розташовані зверху, при цьому перший фон ви надаєте зверху та останній фон, вказаний іззаду. Лише останній фон може включати колір тла.

Отже, коли робити:

background: red;

Він встановлює колір тла червоним, оскільки червоне - це останнє перелічене значення.

Коли ви робите:

background: linear-gradient(to right, grey 50%, yellow 2%) red;

Червоний - колір тла знову, але ви побачите градієнт.

    .box{
        border-radius: 50%;
        width: 200px;
        height: 200px;
        background: linear-gradient(to right, grey 50%, yellow 2%) red;
    }

    .box::before{
       content: "";
       display: block;
       margin-left: 50%;
       height: 50%;
       border-radius: 0 100% 100% 0 / 50%;
       transform: translateX(70px) translateY(-26px) rotate(325deg);
       background: inherit;
    }

    <div class="box">
      
     </div>

Тепер те ж саме з фоновим кольором:

    .box{
        border-radius: 50%;
        width: 200px;
        height: 200px;
        background: linear-gradient(to right, grey 50%, yellow 2%) red;
    }

    .box::before{
       content: "";
       display: block;
       margin-left: 50%;
       height: 50%;
       border-radius: 0 100% 100% 0 / 50%;
       transform: translateX(70px) translateY(-26px) rotate(325deg);
       background-color: inherit;
    }

    <div class="box">
      
     </div>

Причина цього відбувається в тому, що коли ми робимо це:

background: linear-gradient(to right, grey 50%, yellow 2%) #red;

Останнє число встановлює колір фону.

Потім, перш ніж ми успадковуємо від фону (тоді ми отримуємо градієнт) або кольору фону, тоді ми отримуємо червоний.

Одне, що я помітив, я не бачу в документації, яка використовується background: url("image.png")

якщо коротке зображення, як вище, якщо зображення не знайдено, воно надсилає код 302, а не ігнорується так, як це використовується, якщо ви використовуєте

background-image: url("image.png") 

Існує помилка щодо фону та кольору тла

відмінність цього при використанні фону, іноді при створенні веб-сторінки у фоновому режимі CSS: #fff // може перевищувати блок зображення маски ("верхній елемент, текст чи зображення")), тому краще завжди використовувати фон- колір для безпечного використання у вашому дизайні, якщо він індивідуальний