Фоны CSS
Свойства фона CSS добавляют элементам эффекты фона.
В этих главах вы узнаете об этих свойствах фона:
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionbackground(сокращённое свойство)
CSS background-color
Свойство background-color задаёт цвет фона элемента.
Цвет обычно записывается как название цвета (например, red), значение HEX (например, #ff0000) или значение RGB (например, rgb(255,0,0)).
Пример
Вся страница получает светло-голубой фон.
<style> задайте background-color для body равным lightblue. Добавьте заголовок и абзац.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has a light blue background color.</p>
</body>
</html>
Другие элементы
Вы можете задать цвет фона любого HTML-элемента, а не только страницы.
Пример
Элементы <h1>, <div> и <p> получают разные цвета фона.
<style> сделайте <h1> зелёным, <div> светло-голубым, а <p> жёлтым. Добавьте по одному экземпляру каждого элемента в body, чтобы были видны все три цвета фона.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<div>This is a div with a light blue background.</div>
<p>This paragraph has a yellow background.</p>
</body>
</html>
Непрозрачность / прозрачность
Свойство opacity задаёт, насколько прозрачен элемент, от 0.0 до 1.0. Более низкое значение означает большую прозрачность.
Примечание: Когда вы используете opacity на элементе, дочерние элементы получают ту же прозрачность. Это может сделать текст внутри блёклого элемента трудным для чтения.
Пример
У div opacity 0.3, поэтому и его фон, и текст становятся блёклыми.
<style> задайте <div> зелёный фон и opacity 0.3. Поместите внутрь div немного текста, чтобы была видна пониженная прозрачность (которая влияет и на текст).
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
background-color: green;
opacity: 0.3;
}
</style>
</head>
<body>
<h1>Opacity Example</h1>
<div>
<p>This div has opacity 0.3. The text inside it is faded too.</p>
</div>
</body>
</html>
Прозрачность с помощью RGBA
Если вы не хотите, чтобы дочерние элементы становились блёклыми, используйте вместо этого цвет RGBA. RGBA задаёт прозрачность только цвета фона, а не текста.
Цвет RGBA записывается как rgba(red, green, blue, alpha). Alpha — это число от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).
Пример
Фон div прозрачен на 30%, но текст остаётся полностью читаемым.
<style> задайте <div> фон rgba(0, 128, 0, 0.3) (зелёный с прозрачностью 30%). Поместите внутрь div немного текста, который должен оставаться полностью читаемым.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
background: rgba(0, 128, 0, 0.3); /* Green background with 30% opacity */
}
</style>
</head>
<body>
<h1>RGBA Transparency Example</h1>
<div>
<p>This div has a 30% transparent green background, but the text stays fully readable.</p>
</div>
</body>
</html>
Свойство CSS Background Color
Свойство, рассматриваемое на этой странице, — background-color, которое задаёт цвет фона элемента.