opacity

background

The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values.

Try it

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* Using a */ background: green; /* Using a and */ background: url("test.jpg") repeat-y; /* Using a and */ background: border-box red; /* A single image, centered and scaled */ background: no-repeat center/80% url("../img/image.png"); /* Global values */ background: inherit; background: initial; background: revert; background: revert-layer; background: unset; 

The background property is specified as one or more background layers, separated by commas.

The syntax of each layer is as follows:

• Each layer may include zero or one occurrences of any of the following values:
  • The value may only be included immediately after , separated with the ‘/’ character, like this: » center/80% «.
  • The value may be included zero, one, or two times. If included once, it sets both background-origin and background-clip . If it is included twice, the first occurrence sets background-origin , and the second sets background-clip .
  • The value may only be included in the last layer specified.

  Values

  See background-clip and background-origin . Default: border-box and padding-box respectively.

  See background-color . Default: transparent .

  The following three lines of CSS are equivalent:

  background: none; background: transparent; background: repeat scroll 0% 0% / auto padding-box border-box none transparent; 

  Accessibility concerns

  Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. If the image contains information critical to understanding the page’s overall purpose, it is better to describe it semantically in the document.

  Formal definition

  • background-image : none
  • background-position : 0% 0%
  • background-size : auto auto
  • background-repeat : repeat
  • background-origin : padding-box
  • background-clip : border-box
  • background-attachment : scroll
  • background-color : transparent
  • background-position : refer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsets
  • background-size : relative to the background positioning area
  • background-image : as specified, but with url() values made absolute
  • background-position : as each of the properties of the shorthand:
    • background-position-x : A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
    • background-position-y : A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
    • background-color : a color
    • background-image : discrete
    • background-clip : a repeatable list of
    • background-position : a repeatable list of
    • background-size : a repeatable list of
    • background-repeat : discrete
    • background-attachment : discrete

    Formal syntax

    background =
    [ # , ]?

    =
    ||
    [ / ]? ||
    ||
    ||
    ||
    

    =
    ||
    ||
    [ / ]? ||
    ||
    ||
    ||
    

    =
    |
    none

    =
    [ left | center | right | top | bottom | ] |
    [ left | center | right | ] [ top | center | bottom | ] |
    [ center | [ left | right ] ? ] && [ center | [ top | bottom ] ? ]

    =
    [ | auto ] |
    cover |
    contain

    =
    repeat-x |
    repeat-y |
    [ repeat | space | round | no-repeat ]

    =
    scroll |
    fixed |
    local

    =
    border-box |
    padding-box |
    content-box

    =
    |

    =
    |

    =
    url( * ) |
    src( * )

    Examples

    Setting backgrounds with color keywords and images

    HTML

    p class="topbanner"> Starry skybr /> Twinkle twinklebr /> Starry sky p> p class="warning">Here is a paragraphp> p>p> 

    CSS

    .warning  background: pink; > .topbanner  background: url("starsolid.gif") #99f repeat-y fixed; > 

    Result

    Specifications

    Browser compatibility

    BCD tables only load in the browser

    See also

    Found a content problem with this page?

    This page was last modified on Jul 18, 2023 by MDN contributors.

    Your blueprint for a better internet.

    MDN

    Support

    Our communities

    Developers

    Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
    Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

    Источник

    Фон в CSS – памятка для начинающих

    При вёрстке страниц веб-сайта часто требуется задать фон определённому объекту для улучшения читаемости текста и внешнего вида портала в целом. Какими способами и методами можно задавать фон в CSS?

    Работа с фоном в CSS

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

    background-color

    Задаёт цвет фона. Его можно применять как к отдельным элементам ,

    , так и ко всему веб-сайту с помощью тега .

    /* белый фон заголовка и чёрный цвет шрифта h1

    background-image

    Данное свойство используется для вставки фоновой картинки, указывая при этом ссылку на неё.

    Обратите внимание на то, как указан путь к картинке. Это значит, что изображение должно находиться в той же директории, что и файл стилей CSS. Иначе придётся указывать полный путь к файлу.

    background-repeat

    Изображение из предыдущего примера будет повторяться по всему экрану благодаря данному свойству.

    Оно может иметь несколько значений:

    • background-repeat: repeat-x — повторение по горизонтали;
    • background-repeat: repeat-y — повторение по вертикали;
    • background-repeat: repeat — повторение и по горизонтали и по вертикали;
    • background-repeat: no-repeat — изображение не повторяется.

    Например, повторение по горизонтали выглядит так:

    

    background-attachment

    Это свойство определяет фиксирование фонового изображения при скроллинге:

    • background-attachment: scroll — фон прокручивается вместе со страницей;
    • background-attachment: fixed — фон остаётся неподвижным.

    background-position

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

    Свойство может задаваться в процентном формате, в пикселях, сантиметрах или словесно: top, bottom, center, right, left .

    • background-position: 50% 20% — изображение располагается по центру по горизонтали и на 20% отступает сверху;
    • background-position: 80px 60px — отступ изображения вниз на 80 пикселей от верхнего края и на 60 пикселей вправо от левого:

    

    gradient

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

    Использование градиента можно наглядно продемонстрировать в примере кода:

    

    Все приведённые настройки можно сделать в одном свойстве background, записав их в перечисленном порядке.

    background: #fff url(“example_image.png”) no-repeat fixed right bottom

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

    Работа с размером фона в CSS

    В CSS 2.1 фоновая картинка сохраняет фиксированный размер, однако в CSS 3 было введено подсвойство size, благодаря которому фоновое изображение может быть растянуто или сжато.

    Существует несколько способов, позволяющих определить размер:

    Абсолютное изменение размера

    Ширина и высота по умолчанию устанавливаются автоматически, а новый размер можно задать с помощью различных единиц измерения.

    Например, если исходное изображение имеет разрешение 300 на 300 пикселей, то такой код сделает его ширину в два раза меньше:

    background-size: 150px 300px

    Если указано только одно значение, оно по умолчанию считается как ширина, высота определяется автоматически, и пропорции сохраняются.

    Код, который масштабирует картинку до размера 100 на 100 пикселей, выглядит так:

    Относительное изменение размера

    Если применять проценты, размер будет основываться не на изображении, а на элементе.

    То есть, ширина фонового изображения зависит от параметров контейнера. Если ширина контейнера составляет 600 пикселей, размер фонового изображения уменьшится до величины 300 на 300 пикселей.

    Как показывает практика, использование процентов весьма полезно для адаптивного дизайна.

    Масштабирование до максимального размера

    В свойстве background-size значение contain масштабирует фоновое изображение так, чтобы оно полностью заполняло контейнер или всю страницу.

    Уменьшение или увеличение происходит пропорционально до тех пор, пока высота или ширина не будет выходить за рамки контейнера.

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

    Заполнение фоном

    Используя в свойстве background-size значение cover, фон масштабируется таким образом, чтобы заполнить всё пространство контейнера.

    В том случае, если соотношения сторон различаются, картинка обрежется:

    Масштабирование сразу нескольких фонов

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

    background: url(“example_image.png”) 70% 90% no-repeat, url(“example_image.png”) 30% 50% no-repeat, url(“example_image.png”) 15% 25% no-repeat #fff, url(“example_image.png”) 70% 90% no-repeat, background-size: 250px 200px, auto, 100 px;

    Создание полупрозрачного фона в CSS

    Полупрозрачный элемент хорошо заметен на фоновом рисунке. В веб-дизайне полупрозрачность достигается за счёт свойства opacity или задаваемого для фона формата цвета RGBA.

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

    Пример создания полупрозрачного блока:

           
    Так выглядит полупрозрачный блок.
      

    

    Однако достаточно часто полупрозрачным должен быть только фон определённого элемента, а текст оставаться непрозрачным для читабельности.

    В таком случае opacity не подходит и следует воспользоваться форматом RGBA, в котором помимо значений яркости синего, красного и зелёного цветов устанавливается ещё и значение прозрачности. 1 означает абсолютную непрозрачность, а 0 — полную прозрачность.

    Пример задания прозрачного фона:

           
    Прозрачный фон блока и непрозрачный текст.
      

    

    Надеемся, что данное руководство вам пригодилось, и желаем успехов в освоении веб-дизайна!

    Источник

    Читайте также:  Python input integer list