Свойства CSS фона используются для определения фоновых эффектов для элемента.
Свойства CSS используются для фоновых эффектов:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Цвет фона
Свойство background-color определяет цвет фона элемента.
Цвет фона страницы, определен в селекторе body:
Примеры
Пример 1
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { background-color:#b0c4de; }
</style>
</head>
<body>
<h1>Моя страница CSS!</h1>
<p>Привет Мир! Это пример Xhtml.co.il.</p>
</body>
</html>
Цвет фона может быть задан с помощью:
- имя - имя цвета, как "red"
- RGB - значение RGB, как "rgb(255,0,0)"
- шестнадцатеричное значение - как "#ff0000"
В примере, приведенном ниже, элементы h1, p и div имеют различные цвета фона:
Пример 2
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
h1 { background-color:#6495ed; }
p { background-color:#e0ffff; }
div { background-color:#b0c4de; }
</style>
</head>
<body>
<h1>Пример цвета фона CSS!</h1>
<div>
Этот текст внутри элемента div.
<p>Этот параграф имеет свой собственный цвет фона.</p>
Мы все еще в элементе div.
</div>
</body>
</html>
Фоновое изображение
Свойство background-image определяет изображение для использования в качестве фона элемента.
По умолчанию, изображение повторяется, оно охватывает весь элемент.
Фоновое изображение для страницы может быть установлено следующим образом:
Пример 3
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { background-image:url('/tryit/css/img/paper.gif'); }
</style>
</head>
<body>
<h1>Привет Мир!</h1>
</body>
</html>
Ниже приведен пример плохой комбинации текста и фона. Текст почти не читается:
Пример 4
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { background-image:url('/tryit/css/img/bgdesert.jpg'); }
</style>
</head>
<body>
<h1>Привет Мир!</h1>
<p>Этот текст не легко читать на этом фоне изображения.</p>
</body>
</html>
Фоновое изображение - Повторение по горизонтали или по вертикали
По умолчанию, свойство background-image повторяет изображение как по горизонтали, так и по вертикали.
Некоторые изображения должны быть повторены только горизонтально или вертикально, или они будут выглядеть странно, как это:
Пример 5
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { background-image:url('/tryit/css/img/gradient2.png'); }
</style>
</head>
<body>
<h1>Привет Мир!</h1>
</body>
</html>
Если изображение повторяется только по горизонтали (repeat-x), фон будет выглядеть лучше:
Пример 6
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body
{
background-image:url('/tryit/css/img/gradient2.png');
background-repeat:repeat-x;
}
</style>
</head>
<body>
<h1>Привет Мир!</h1>
</body>
</html>
Фоновое изображение - Устанавливает позицию и не повторяет
При использовании фонового изображения, используйте изображение, которое не нарушает текст.
Показ изображения только один раз задается свойством background-repeat:
Пример 7
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body
{
background-image:url('/tryit/css/img/img_tree.png');
background-repeat:no-repeat;
}
</style>
</head>
<body>
<h1>Привет Мир!</h1>
<p>Xhtml.co.il пример фонового изображения.</p>
<p>Фоновое изображение показывается только один раз, но оно мешает читателю!</p>
</body>
</html>
В приведенном выше примере, фоновое изображение показано на том же месте, что и текст. Мы хотим изменить положение изображения, так чтобы оно мешало тексту как можно меньше.
Положение изображения задается свойством background-position:
Пример 8
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body
{
background-image:url('/tryit/css/img/img_tree.png');
background-repeat:no-repeat;
background-position:right top;
margin-right:260px;
}
</style>
</head>
<body>
<h1>Привет Мир!</h1>
<p>Xhtml.co.il пример фона без повторения, с установкой позиции.</p>
<p>Теперь фоновое изображение показывается только один раз, и расположено далеко от текста.</p>
<p>В этом примере мы также добавили поля с правой стороны, так что фоновое изображение никогда не будет мешать тексту.</p>
</body>
</html>
Фон - Краткая форма записи
Как вы можете видеть из приведенных выше примеров, есть много свойств, которые необходимо учитывать при задании фона.
Для сокращения кода, можно также указать все свойства в одном свойстве. Это называется сокращенное свойство.
Краткая форма записи, для фона просто "background":
Пример 9
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body
{
background:#ffffff url('/tryit/css/img/img_tree.png') no-repeat right top;
margin-right:260px;
}
</style>
</head>
<body>
<h1>Привет Мир!</h1>
<p>Теперь фоновое изображение показывается только один раз, и расположено далеко от текста.</p>
<p>В этом примере мы также добавили поля с правой стороны, так что фоновое изображение никогда не будет мешать тексту.</p>
</body>
</html>
При использовании сокращенной записи свойства порядок значений свойств следующий:
Не важно, если некоторые из значений свойства отсутствуют, до тех пор, пока хотя бы один присутствует в этом порядке.
Этот пример использует более продвинутый CSS:
Еще примеры
Пример 10
Этот пример показывает, как установить фиксированное фоновое изображение. Изображение не будет прокручиваться с остальной частью страницы.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body
{
background-image:url('/tryit/css/img/smiley.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
</head>
<body>
<p>Фоновое изображение фиксировано. Попробуйте прокрутить страницу.</p>
<p>Фоновое изображение фиксировано. Попробуйте прокрутить страницу.</p>
<p>Фоновое изображение фиксировано. Попробуйте прокрутить страницу.</p>
<p>Фоновое изображение фиксировано. Попробуйте прокрутить страницу.</p>
<p>Фоновое изображение фиксировано. Попробуйте прокрутить страницу.</p>
<p>Фоновое изображение фиксировано. Попробуйте прокрутить страницу.</p>
<p>Фоновое изображение фиксировано. Попробуйте прокрутить страницу.</p>
<p>Фоновое изображение фиксировано. Попробуйте прокрутить страницу.</p>
<p>Фоновое изображение фиксировано. Попробуйте прокрутить страницу.</p>
<p>Фоновое изображение фиксировано. Попробуйте прокрутить страницу.</p>
<p>Фоновое изображение фиксировано. Попробуйте прокрутить страницу.</p>
<p>Фоновое изображение фиксировано. Попробуйте прокрутить страницу.</p>
</body>
</html>
Все свойства фона CSS
Номер в колонке "CSS" указывает, в какой версии CSS свойство определено (CSS1 или CSS2).
| Свойство | Описание | Значения | CSS |
|---|---|---|---|
| background | Устанавливает все свойства фона в одной декларации | background-color background-image background-repeat background-attachment background-position inherit | 1 |
| background-attachment | Устанавливает фоновое изображение фиксированное или прокручиваемое с остальной частью страницы | scroll fixed inherit | 1 |
| background-color | Устанавливает цвет фона элемента | color-rgb color-hex color-name transparent inherit | 1 |
| background-image | Устанавливает фоновое изображение для элемента | url(URL) none inherit | 1 |
| background-position | Устанавливает начальное положение фонового изображения | left top left center left bottom right top right center right bottom center top center center center bottom x% y% xpos ypos inherit | 1 |
| background-repeat | Устанавливает, если / как фоновое изображение будет повторяться | repeat repeat-x repeat-y no-repeat inherit | 1 |
Была ли эта информация полезной?
