CSS прозрачный фон
Как сделать CSS фон страницы
Прозрачный CSS фон, цвет фона страницы
CSS атрибуты, определяющие фон страницы или элемента
CSS цвет фона страницы будет зеленым:
<head>
<title>Пример с цветом фона</title>
<style type="text/css">
body {
background-color:#66cc66
}
.fon_text {
background-color:#339933;
color:#ffffff
}
</style> </head>
<body>
<p class="fon_text">Текст белого цвета на зеленом фоне</p>
</body>
|
Результат:

Посмотреть результат в новом окне: CSS фон и его цвет
Атрибуты и значения
- background-color – определяет цвет фона.
- color – определяет цвет текста.
- Селектор body – определяет видимую часть документа.
Следующая запись также будет правильной:
<head>
<title>Пример с фоновым цветом</title>
<style type="text/css">
body {
background:#66cc66
}
.fon_text {
background:#339933;
color:#ffffff
}
</style> </head>
<body>
<p class="fon_text">Текст белого цвета на зеленом фоне</p>
</body>
|
Результат: Цвет фона в CSS
В верхнем примере цвет фона был задан при помощи CSS атрибута background.
CSS картинка - фон или фоновое изображение
CSS картинка - фон определяется с помощью изображения
Например, у нас есть вот такая картинка:

Напишим следующий код для отдельной страницы:
<head>
<title>Картинка - фон в CSS</title>
</head>
<body style="background-image:url(../images/primer-img.jpg)">
<p>Какой-то произвольный текст.</p>
</body>
</html>
|
Посмотреть результат в новом окне: CSS фон - картинка
В следующем уроке фон - картинка рассмотрен более подробно.
CSS прозрачный фон для блока
CSS атрибуты, определяющие прозрачность фона:
<head>
<title>Полупрозрачный элемент</title>
<style type="text/css">
div.page {width:450px; height:300px; background:url(../images/beetle.jpg) repeat; border:2px solid #555555}
div.block {width:260px; height:140px; margin-top:79px; margin-left:94px; background-color:#ffffff; border:1px solid #333333;
/* Internet Explorer */
filter:alpha(opacity=50);
/* CSS3 standard */
opacity:0.5}
div.block p {margin:47px 0 0 10px; font-weight:bold; color:#000000}
</style>
</head>
<body>
<div class="page">
<div class="block">
<p>Прозрачный фон для блока.</p>
</div>
</div>
</body>
|
Результат:

CSS прозрачность фона была задана для Internet Explorer и для других браузеров.
Автор проекта - Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018
CSS курсоры
Прозрачный CSS фон и картинка
CSS картинка и фон