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

241

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

Snippet #1

body { background-color: blue; }

Snippet #2

body { background: blue; }

Ваш Ответ

16   ответов
136

background заменит все предыдущиеbackground-color, background-imageи др. технические характеристики. Это в основном сокращение, ноreset также.

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

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

быть следующим:

background: black;

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

Это более полный ответ, часть сброса очень важная разница.
3

CSS background properties are used to define the background effects of an element.

CSS properties used for background effects:

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

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

0

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

With CSS3, you can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.

Итак, когда кто-то делает:

background: red;

Он устанавливает цвет фона на красный, потому что красный - последнее значение в списке.

Когда один делает:

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

Красный цвет фона еще разBUT вы увидите градиент.

    .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;

Последнее число устанавливает цвет фона.

Затем, прежде чем мы наследуем от фона (тогда мы получим градиент) или от цвета фона, мы получим красный цвет.

-1

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

Извините, это не имеет смысла. Можете ли вы отредактировать свой ответ, чтобы подробнее рассказать об этом?
23

background Вы можете установить всеbackground свойства как:

background-color background-image
background-repeat
background-position
etc.

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;
More info

(See Caption: Background - Shorthand property)

-2

background: url("image.png")

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

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

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

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

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

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

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

1

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


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

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

Background - Shorthand property To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.

The shorthand property for background is background:

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

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


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

It does not matter if one of the property values is missing, as long as the other ones are in this order.

3

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

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

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

3

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;
73

CSS performance :

background противbackground-color :

Comparison of 18 color swatches rendered 100 times on a page as small rectangles, once with background and once with background-color.

Background vs background-color

While these numbers are from a single page reload, with subsequent refreshes the render times changed, but the percent difference was basically the same every time.

That's a savings of almost 42.6ms, almost twice as fast, when using background instead of background-color in Safari 7.0.1. Chrome 33 appears to be about the same.

This honestly blew me away because for the longest time for two reasons:

I usually always argue for explicitness in CSS properties, especially with backgrounds because it can adversely affect specificity down the road. I thought that when a browser sees background: #000;, they really see background: #000 none no-repeat top center;. I don't have a link to a resource here, but I recall reading this somewhere.

Ref : https://github.com/mdo/css-perf#background-vs-background-color

@ LeventDivilioglu Как сказал тестер:These kind of tests are cheats and always going to be somewhat inaccurate from the real world github.com/mdo/css-perf#updated-conclusions-from-averages
Я пришел сюда для этого - действительно,really удивлен результатами. Спасибо за этот ответ.
Можете ли вы также сказать, что все сокращения CSS более предпочтительны из-за лучшей производительности?
223

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

background-color
background-image
background-position
background-repeat
background-attachment
background-clip
background-origin
background-size

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

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

Fwiw, по ссылке @ ChristianVarga:The 'background' property is a shorthand property for setting the individual background properties (i.e., 'background-color', 'background-image', 'background-repeat', 'background-attachment' and 'background-position') at the same place in the style sheet. Given a valid declaration, the 'background' property first sets all the individual background properties to their initial values, then assigns explicit values given in the declaration. Пример дан:P { background: url("chess.png") gray 50% repeat fixed }
есть разница. у меня есть div с прозрачными промежутками между его дочерними элементами при использовании background-color. но это абсолютно твердо, когда я просто использую фон. есть ощутимая разница в их свойствах или поведении.
Такbackground это просто ярлык для любого из 5 атрибутов? Следовательно, не практично в реальной жизни, если есть положение фона, цвет и изображение? stanigator
Это очень практично, потому что вы можете указать все эти атрибутыin one line, Обратитесь кOfficial Documentation
1

rectangles, once with background and once with background-color.

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

background

Chrome 54: 443 (& # xB5; с / дел)

Firefox 49: 162 (& # xB5; с / дел)

Edge 10: 56 (& # xB5; с / дел)

background-color

Chrome 54: 449 (& # xB5; с / дел)

Firefox 49: 171 (& # xB5; с / дел)

Edge 10: 58 (& # xB5; с / дел)

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

0

/*works*/
background: gray;

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

This works:

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

This doesn't:

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

сокращением).

Джон Доу, ты сказал это лучше и точнее!

Похожие вопросы