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

Ответ 1

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

цвет фона
Фоновое изображение
фон положение
фон-повторить
фон-вложение
фон-клип
фон-происхождения
background-size

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

Какой из них выбрать, по сути, зависит от вас, но он также может зависеть от конкретных условий ваших деклараций стиля (например, если вам нужно переопределить только background-color при наследовании других связанных свойств background-* от родительского элемента, или если вам нужно удалить все значения, кроме background-color).

Ответ 2

background выполнит все предыдущие спецификации background-color, background-image и т.д. Это в основном сокращенная версия, но reset.

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

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

:

background: black;

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

Ответ 3

О производительности CSS:

background vs 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

Ответ 4

С помощью 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;

Подробнее

(см. Caption: Background - Shorthand свойство)

Ответ 5

Одно из отличий:

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

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

то вы не можете переопределить его с помощью свойства background-color.

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

например: http://jsfiddle.net/Z57Za/11/ и http://jsfiddle.net/Z57Za/12/

Ответ 6

Нет никакой разницы. Оба будут работать одинаково.

Свойства фона CSS используются для определения фоновых эффектов   элемент.

     

Свойства CSS, используемые для фоновых эффектов:

• background-color
• background-image
• background-repeat
• background-attachment
• фон положение

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

Ответ 7

Они оба одинаковы. Есть несколько фоновых селекторов (т.е. 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;

Ответ 8

Различие заключается в том, что свойство shtand background задает несколько связанных с фоном свойств. Он устанавливает их все, даже если вы укажете только, например. значение цвета, так как тогда другие свойства устанавливают на их начальные значения, например. background-image до none.

Это не означает, что он всегда будет переопределять любые другие настройки для этих свойств. Это зависит от каскада в соответствии с обычными, обычно неправильно понимаемыми правилами.

На практике стенография имеет тенденцию быть более безопасной. Это предосторожность (не полная, но полезная) от случайного получения некоторых неожиданных свойств фона, таких как фоновое изображение, из другой таблицы стилей. Кроме того, он короче. Но вы должны помнить, что это действительно означает "установить все свойства фона".

Ответ 9

Это лучший ответ. Сокращенное (фоновое) значение для reset и DRY (в сочетании с longhand).

Ответ 10

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

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

background

Chrome 54: 443 (мкс/div)

Firefox 49: 162 (мкс/div)

Edge 10: 56 (мкс/div)

background-color

Chrome 54: 449 (мкс/div)

Firefox 49: 171 (мкс/div)

Edge 10: 58 (мкс/div)

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

Ответ 11

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

Не имеет значения, если одно из значений свойств отсутствует, как долго так как другие находятся в этом порядке.

Ответ 12

Я заметил при создании писем для Outlook...

/*works*/
background: gray;

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

Ответ 13

Вы можете сделать некоторые довольно аккуратные вещи, как только вы поймете, что вы можете играть с наследованием с этим. Однако сначала дайте понять что-то из этого doc на фоне:

С 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>

Ответ 14

Есть ошибка относительно фона и фона

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

Ответ 15

Одна вещь, которую я заметил, что я не вижу в документации, использует background: url("image.png")

короткая рука, как показано выше, если изображение не найдено, оно отправляет код 302 вместо игнорирования, как если бы вы использовали

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