В чем разница между фоном и цветом фона

Какая разница между указанием цвета фона с помощью backgroundи background-color?

Фрагмент №1

body { background-color: blue; }

Фрагмент № 2

body { background: blue; }

Предполагая, что это два разных свойства, в вашем конкретном примере нет разницы в результате, так как на backgroundсамом деле это сокращение для

background-color
background-image
background-position
background-repeat
фоновое вложение
фоновый клип
background-origin
background-size

Таким образом, кроме 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 :

backgroundпротив 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;

VS.

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

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

(См. Заголовок: Фон - Сокращенное свойство)

Одно из различий:

Если вы используете изображение в качестве фона таким образом:

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

тогда вы не можете переопределить его с помощью свойства "background-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, используемые для фоновых эффектов:

• фоновый цвет
• изображение на заднем плане
• фон-повторить
• фон-вложение
• фон положение

Свойство Background включает все эти свойства, и вы можете просто написать их в одну строку.

Это лучший ответ. Сокращение (фон) для сброса и СУХОГО (в сочетании с сокращением).

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

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

background

Chrome 54 : 443 (мкс / дел)

Firefox 49 : 162 (мкс / дел)

Край 10 : 56 (мкс / дел)

background-color

Chrome 54 : 449 (мкс / дел)

Firefox 49 : 171 (мкс / дел)

Край 10 : 58 (мкс / дел)

Как видите - разницы почти нет.

backgroundэто ярлык для background-colorнекоторых других фоновых материалов, как показано ниже:

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

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

Фон - Сокращенное свойство

Чтобы сократить код, также можно указать все свойства фона в одном отдельном свойстве. Это называется сокращенным свойством.

Сокращенное свойство для background это background:

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>

Теперь то же самое с background-color:

    .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 // может перебирать блок изображения маски ("top item, text or image")), поэтому лучше всегда использовать background- цвет для безопасного использования, в вашем дизайне, если его индивидуальный