Свойства CSS, связанные с фоном

Articles

Эта статья объясняет свойства CSS, связанные с фоном.

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

YouTube Video

Создание HTML для предварительного просмотра

css-background.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-background.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Background-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Background And Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>background-color</h3>
 23            <section>
 24                <header><h4>background-color: red</h4></header>
 25                <section class="sample-view">
 26                    <div class="red-example">This is a red background.</div>
 27                </section>
 28                <header><h4>background-color: #FF5733</h4></header>
 29                <section class="sample-view">
 30                    <div class="hex-example">This is a background with hex color (#FF5733).</div>
 31                </section>
 32                <header><h4>background-color: rgb(255, 87, 51)</h4></header>
 33                <section class="sample-view">
 34                    <div class="rgb-example">This is a background with RGB color (rgb(255, 87, 51)).</div>
 35                </section>
 36                <header><h4>background-color: rgba(255, 87, 51, 0.7)</h4></header>
 37                <section class="sample-view">
 38                    <div class="rgba-example">This is a background with RGBA color (rgba(255, 87, 51, 0.7)).</div>
 39                </section>
 40                <header><h4>background-color: hsl(14, 100%, 60%)</h4></header>
 41                <section class="sample-view">
 42                    <div class="hsl-example">This is a background with HSL color (hsl(14, 100%, 60%)).</div>
 43                </section>
 44                <header><h4>background-color: hsla(14, 100%, 60%, 0.7)</h4></header>
 45                <section class="sample-view">
 46                    <div class="hsla-example">This is a background with HSLA color (hsla(14, 100%, 60%, 0.7)).</div>
 47                </section>
 48                <header><h4>background-color: transparent</h4></header>
 49                <section class="sample-view">
 50                    <div class="transparent-example">This is a background with transparency (transparent).</div>
 51                </section>
 52            </section>
 53        </article>
 54        <article>
 55            <h3>background-image</h3>
 56            <section>
 57                <header><h4>background-image: url('image.jpg')</h4></header>
 58                <section class="sample-view">
 59                    <div class="background-image-example">This is a background image.</div>
 60                </section>
 61                <header><h4>background-image: linear-gradient(to right, red, blue)</h4></header>
 62                <section class="sample-view">
 63                    <div class="background-image-gradient">This is a background gradient.</div>
 64                </section>
 65            </section>
 66        </article>
 67        <article>
 68            <h3>background-position</h3>
 69            <section>
 70                <header><h4>background-position: top left</h4></header>
 71                <section class="sample-view">
 72                    <div class="top-left-example">Top Left</div>
 73                </section>
 74                <header><h4>background-position: center</h4></header>
 75                <section class="sample-view">
 76                    <div class="center-example">Center</div>
 77                </section>
 78                <header><h4>background-position: bottom right</h4></header>
 79                <section class="sample-view">
 80                    <div class="bottom-right-example">Bottom Right</div>
 81                </section>
 82            </section>
 83        </article>
 84        <article>
 85            <h3>background-size</h3>
 86            <section>
 87                <header><h4>background-size: cover</h4></header>
 88                <section class="sample-view">
 89                    <div class="cover-example">Cover</div>
 90                </section>
 91                <header><h4>background-size: contain</h4></header>
 92                <section class="sample-view">
 93                    <div class="contain-example">Contain</div>
 94                </section>
 95                <header><h4>background-size: 100px 100px</h4></header>
 96                <section class="sample-view">
 97                    <div class="fixed-size-example">100px by 100px</div>
 98                </section>
 99            </section>
100        </article>
101        <article>
102            <h3>background-repeat</h3>
103            <section>
104                <header><h4>background-repeat: repeat</h4></header>
105                <section class="sample-view">
106                    <div class="repeat-example">Repeat</div>
107                </section>
108                <header><h4>background-repeat: repeat-x</h4></header>
109                <section class="sample-view">
110                    <div class="repeat-x-example">Repeat X</div>
111                </section>
112                <header><h4>background-repeat: no-repeat</h4></header>
113                <section class="sample-view">
114                    <div class="no-repeat-example">No Repeat</div>
115                </section>
116                <header><h4>background-repeat: space</h4></header>
117                <section class="sample-view">
118                    <div class="space-example">Space</div>
119                </section>
120                <header><h4>background-repeat: round</h4></header>
121                <section class="sample-view">
122                    <div class="round-example">Round</div>
123                </section>
124            </section>
125        </article>
126    </main>
127</body>
128</html>

Фон и украшение

Свойство `background-color`

 1/* Background color specification */
 2.red-example {
 3    background-color: red;
 4}
 5
 6.hex-example {
 7    background-color: #FF5733;
 8}
 9
10.rgb-example {
11    background-color: rgb(255, 87, 51);
12}
13
14.rgba-example {
15    background-color: rgba(255, 87, 51, 0.7);
16}
17
18.hsl-example {
19    background-color: hsl(14, 100%, 60%);
20}
21
22.hsla-example {
23    background-color: hsla(14, 100%, 60%, 0.7);
24}
25
26.transparent-example {
27    background-color: transparent;
28    color: black;
29}

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

Объяснение:

red-example класс задает цвет фона как красный с использованием ключевого слова.
hex-example класс задает цвет фона с использованием шестнадцатеричного кода.
rgb-example класс задает цвет фона с использованием формата RGB.
rgba-example класс задает цвет фона с использованием формата RGBA, добавляя прозрачность.
hsl-example класс задает цвет фона с использованием формата HSL.
hsla-example класс задает цвет фона с использованием формата HSLA, добавляя прозрачность.
transparent-example класс устанавливает прозрачный фон.

Свойство `background-image`

 1/* Background image styles */
 2.background-image-example {
 3    /* Specify the image URL */
 4    background-image: url('image.jpg');
 5    /* Scale the image to cover the entire element */
 6    background-size: cover;
 7    /* Center the image */
 8    background-position: center;
 9    /* Disable image repetition */
10    background-repeat: no-repeat;
11    color: white;
12    display: flex;
13    align-items: center;
14    justify-content: center;
15}
16
17/* Gradient background styles */
18.background-image-gradient {
19    /* Gradient from left to right */
20    background-image: linear-gradient(to right, red, blue);
21    color: white;
22    display: flex;
23    align-items: center;
24    justify-content: center;
25}

Свойство background-image используется для установки изображения в качестве фона элемента. Указанное изображение отображается как фон элемента, а его размер, позицию и метод повторения можно настроить с помощью других связанных свойств. Мы также объясним связанные свойства, такие как background-size, background-position и background-repeat, позже.

Объяснение:

background-image-example класс использует свойство background-image, чтобы установить image.jpg в качестве фона. background-size: cover заставляет изображение покрывать весь элемент, а background-position: center центрирует изображение. Повтор изображения отключается с помощью background-repeat: no-repeat.
Класс background-image-gradient использует linear-gradient() для задания градиентного фона от красного к синему. Градиент отображается слева направо.

Типы значений, которые можно указать

Свойство background-image может принимать следующие значения.

url(): Указывает URL фонового изображения. Файл изображения включается в url(). (ex.url('image.jpg'))
none: Указывает, что фоновое изображение не будет установлено. Это значение по умолчанию.
Градиенты: Также можно использовать градиенты в качестве фоновых изображений с помощью функций градиентов CSS. (ex.linear-gradient(), radial-gradient())

Основные моменты свойства `background-image`

Размер и позиционирование изображения: Размер и размещение фоновых изображений могут быть точно настроены с помощью других свойств, что позволяет корректировать дизайн. Например, задание background-size: cover растягивает изображение, чтобы покрыть всю область, устраняя любое обрезание.
Использование градиентов: Вместо изображения вы можете использовать градиент в качестве фона, добавляя динамики в дизайн.

Свойство `background-position`

 1/* Positioned at the top-left */
 2.top-left-example {
 3    background-image: url('image.jpg');
 4    background-position: top left;
 5    background-size: cover;
 6    background-repeat: no-repeat;
 7    background-color: lightblue;
 8    height: 100px;
 9}
10
11/* Centered */
12.center-example {
13    background-image: url('image.jpg');
14    background-position: center;
15    background-size: cover;
16    background-repeat: no-repeat;
17    background-color: lightcoral;
18    height: 100px;
19}
20
21/* Positioned at the bottom-right */
22.bottom-right-example {
23    background-image: url('image.jpg');
24    background-position: bottom right;
25    background-size: cover;
26    background-repeat: no-repeat;
27    background-color: lightgreen;
28    height: 100px;
29}

Свойство background-position используется для указания положения фонового изображения внутри элемента. Контролируя, где фоновое изображение отображается внутри элемента, вы можете создавать макеты, соответствующие вашему дизайну. По умолчанию установлено 0% 0%, что помещает изображение в верхний левый угол.

Объяснение:

top-left-example класс задает положение изображения как top left, располагая изображение в верхнем левом углу.
center-example класс размещает изображение в центре с использованием атрибута center.
bottom-right-example класс задает положение изображения как bottom right, располагая изображение в нижнем правом углу.

Типы значений, которые можно указать

Свойство background-position может принимать следующие типы значений.

Ключевые слова: Вы можете указать left, right, top, bottom, center.
- Указание center поместит фоновое изображение в центр элемента.
- Указание right поместит фоновое изображение с правой стороны.
- Указание top left поместит фоновое изображение в верхний левый угол.
- Указание bottom right разместит фоновое изображение в правом нижнем углу.
Длина или процент: Вы можете указать значения, например, 10px 20px, 50% 50%.
- Указание 10px 20px разместит фоновое изображение на расстоянии 10px от левого края и 20px от верхнего края.
- Указание 50% 50% отцентрирует фоновое изображение как по горизонтали, так и по вертикали.
Функция calc(): Позволяет более точно задавать позиционирование с использованием CSS-вычислений.

Свойство `background-size`

 1/* Fit the image to cover the entire area */
 2.cover-example {
 3    background-image: url('image.jpg');
 4    /* The image covers the entire element */
 5    background-size: cover;
 6    background-color: lightblue;
 7}
 8
 9/* Fit the image within the element */
10.contain-example {
11    background-image: url('image.jpg');
12    /* The image fits within the element */
13    background-size: contain;
14    background-color: lightgreen;
15}
16
17/* Display at a fixed size */
18.fixed-size-example {
19    background-image: url('image.jpg');
20    /* Fixed width of 100px and height of 100px */
21    background-size: 100px 100px;
22    background-color: lightcoral;
23}

Свойство background-size используется для задания размеров фонового изображения для элемента. С помощью этого свойства можно настроить отображение фонового изображения: заполнение всего элемента или сохранение его оригинального размера в соответствии с дизайном. Значение по умолчанию — auto, которое сохраняет оригинальный размер фонового изображения.

Объяснение:

cover-example класс задает cover. Изображение будет увеличено, чтобы покрыть весь элемент, но некоторые части могут быть обрезаны.
contain-example класс задает contain. Изображение будет настроено так, чтобы поместиться в элементе, но могут появиться пустые области.
fixed-size-example класс задает фиксированный размер фонового изображения, устанавливая ширину и высоту по 100px.

Типы значений, которые можно указать

Свойству background-size можно присвоить следующие типы значений.

Ключевые слова
- auto: Сохраняет размер изображения по умолчанию (ширина и высота определяются автоматически).
- cover: Настраивает размер фонового изображения для полного покрытия элемента. Изображение заполнит весь элемент, но некоторые части могут быть обрезаны.
- contain: Настраивает изображение так, чтобы оно помещалось в пределах элемента, но не охватывало его полностью. Соотношение сторон изображения сохраняется.
Числовые значения (px, %, em и т. д.)
- Ширина и высота: Укажите ширину и высоту явно. Если указано только одно значение, оно применяется к ширине, а высота настраивается автоматически.
- Процент: Укажите размер фонового изображения в процентах от размера элемента. Например, 50% 50% устанавливает изображение на половину ширины и высоты элемента.

Свойство `background-repeat`

 1/* Repeat vertically and horizontally */
 2.repeat-example {
 3    background-image: url('pattern.png');
 4    background-repeat: repeat;
 5    background-size: auto;
 6}
 7
 8/* Repeat only horizontally */
 9.repeat-x-example {
10    background-image: url('pattern.png');
11    background-repeat: repeat-x;
12    background-size: auto;
13}
14
15/* No repetition */
16.no-repeat-example {
17    background-image: url('pattern.png');
18    background-repeat: no-repeat;
19    background-size: auto;
20}
21
22/* Space out evenly */
23.space-example {
24    background-image: url('pattern.png');
25    background-repeat: space;
26    background-size: auto;
27    width: 90px;
28    height: 60px;
29}
30
31/* Resize and repeat */
32.round-example {
33    background-image: url('pattern.png');
34    background-repeat: round;
35    background-size: auto;
36}

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

Объяснение:

repeat-example класс отображает изображение, повторяющееся как вертикально, так и горизонтально.
repeat-x-example класс повторяет изображение только по горизонтали.
no-repeat-example класс отображает изображение только один раз без повторения.
space-example класс равномерно размещает фоновые изображения с одинаковыми интервалами между ними.
round-example класс автоматически изменяет размер фонового изображения, чтобы повторяться и заполнять весь элемент.

Допустимые значения

Свойству background-repeat можно присвоить следующие типы значений.

repeat: Изображение на фоне повторяется как по оси X (горизонтали), так и по оси Y (вертикали). Это значение по умолчанию.
repeat-x: Изображение на фоне повторяется только по оси X (горизонтали).
repeat-y: Изображение на фоне повторяется только по оси Y (вертикали).
no-repeat: Изображение на фоне не повторяется и отображается только один раз.
space: Изображение на фоне повторяется с равными промежутками между копиями.
round: Изображение на фоне повторяется, но его размер подстраивается под размеры элемента. Изображение может быть изменено в размерах.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

CSS-свойства, связанные с моделью коробки Свойства CSS, связанные с украшением моделью коробки

Свойства CSS, связанные с фоном

YouTube Video

Создание HTML для предварительного просмотра

Фон и украшение

Свойство background-color

Объяснение:

Свойство background-image

Объяснение:

Типы значений, которые можно указать

Основные моменты свойства background-image

Свойство background-position

Объяснение:

Типы значений, которые можно указать

Свойство background-size

Объяснение:

Типы значений, которые можно указать

Свойство background-repeat

Объяснение:

Допустимые значения

YouTube Video

Свойство `background-color`

Свойство `background-image`

Основные моменты свойства `background-image`

Свойство `background-position`

Свойство `background-size`

Свойство `background-repeat`