Результаты вашего поиска

    background

    Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

    Описание

    The background CSS property is a shorthand for setting the individual background values in a single place in the style sheet. background can be used to set the values for one or more of: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, and background-attachment.

    The background CSS shorthand property assigns explicit given values and sets missing properties to their initial values.

    Начальное значениекак и у каждого из подсвойств этого свойства:
    Применяется квсе элементы. Это также применяется к ::first-letter и ::first-line.
    Наследуетсянет
    Процентыкак и у каждого из подсвойств этого свойства:
    • background-position: относятся к размеру области позиционирования фона минус размер фонового изображения; размер - ширина горизонтальных смещений и высота вертикальных
    • background-size: относительно области позиционирования фона
    Отображениевизуальный
    Обработка значениякак и у каждого из подсвойств этого свойства:
    • background-image: как указано, но с абсолютным URI
    • background-position: список, каждый элемент которого состоит из двух ключевых слов, представляющих начало координат и два смещения от этого начала, каждый приводится в качестве абсолютной длины (если дано length), иначе как проценты
    • background-size: как указано, но с относительной длиной, конвертируемой в абсолютные длины
    • background-repeat: список, каждый элемент которого содержит 2 ключевых слова, по одному на измерение
    • background-origin: как указано
    • background-clip: как указано
    • background-attachment: как указано
    • background-color: Если значение полупрозрачно, значение будет соответствовать rgba(). А если не будет полупрозрачным, то будет использоваться rgb(). Ключевое слово transparent интерпретируется в rgba(0,0,0,0).
    Анимируемостькак и у каждого из подсвойств этого свойства:
    • background-color: да, как цвет
    • background-image: нет
    • background-clip: нет
    • background-position: да, как посторяющийся список из: , простой список из: , длина, проценты или calc(); когда оба значения являются длинами, они интерполируются как длины; когда оба значения являются процентами, они интерполируются как проценты; в остальных случаях, оба значения преобразуются функцией calc() в сумму длины и процента (каждый из них может быть равен нулю), а затем эта функция интерполирует каждую половину как вещественные числа.
    • background-size: да, как посторяющийся список из: , простой список из: , длина, проценты или calc(); когда оба значения являются длинами, они интерполируются как длины; когда оба значения являются процентами, они интерполируются как проценты; в остальных случаях, оба значения преобразуются функцией calc() в сумму длины и процента (каждый из них может быть равен нулю), а затем эта функция интерполирует каждую половину как вещественные числа.. This means keyword values are not animatable.
    • background-repeat: нет
    • background-attachment: нет
    Канонический порядокпорядок появления в формальной грамматике значений

    Синтаксис

    /* Использование свойства <background-color> */
background: green;

/* Использование свойств <bg-image> и <repeat-style> */
background: url("test.jpg") repeat-y;

/* Using a <box> and <background-color> */
background: border-box red;

/* A single image, centered and scaled */
background: no-repeat center/80% url("../img/image.png");
    Предупреждение: The background-color can only be defined on the last background, as there is only one background color for the whole element.

    Значения

    Свойству можно указывать одно или более значений из данного списка в любом порядке:

    <attachment>
    See background-attachment
    <box>
    See background-clip
    <background-color>
    See background-color
    <bg-image>
    See background-image
    <position>
    See background-position
    <repeat-style>
    See background-repeat
    <bg-size>
    See background-size. This property must be specified after <position>, separated with the '/' character.

    Формальный синтаксис

    [ <bg-layer> , ]* <final-bg-layer>
    where 
    <bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}
    <final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'>
    where 
    <bg-image> = none | <image>
    <bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain
    <repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
    <attachment> = scroll | fixed | local
    <box> = border-box | padding-box | content-box

    Примеры

    HTML

    <p class="topbanner">
  Starry sky<br/>
  Twinkle twinkle<br/>
  Starry sky
</p>
<p class="warning">Here is a paragraph<p>

    CSS

    .warning { 
  background: red; 
}

.topbanner { 
  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed; 
}

    Результат

    Спецификации

    Спецификация Статус Комментарий
    CSS Backgrounds and Borders Module Level 3
    Определение 'background' в этой спецификации.    		 Кандидат в рекомендации Поддержка мультифонов и свойств background-size, background-origin и background-clip.
    CSS Level 2 (Revision 1)
    Определение 'background' в этой спецификации.    		 Рекомендация Нет значительных изменений
    CSS Level 1
    Определение 'background' в этой спецификации.    		 Рекомендация Первоначальное определение

    Совместимость с браузерами

    Особенность Firefox (Gecko) Chrome Internet Explorer Opera Safari
    Базовая поддержка 1.0 (1.7 или ранее) 1.0 4.0 3.5 1.0
    Мультифоны 3.6 (1.9.2) 1.0 9.0 10.5 1.3
    SVG-фоны 4.0 (2.0) 31.0 9.0 21.0 5.1
    Поддержка свойства background-size 18.0 (18.0) 21.0 9.0 21.0 6.1
    Поддержка свойств background-origin и background-clip 22.0 (22.0) 31.0 9.0 21.0 5.1
    Особенность Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
    Базовая поддержка 1.0 (1.9.2) 2.1 10.0 5.0 3.2
    Мультифоны 1.0 (1.9.2) 2.1 10.0 5.0 3.2
    SVG-фоны 4.0 (2.0) 3.0 10.0 ? 4.2
    Поддержка свойства background-size 18.0 (18.0) 3.0 10.0 (Да) 4.0
    Поддержка свойств background-origin и background-clip 22.0 (22.0) 3.0 10.0 Нет 4.0

    Смотрите также

    Метки документа и участники

     Внесли вклад в эту страницу: andreww2012
     Обновлялась последний раз: andreww2012,