CSS прозрачный фон

Как сделать CSS фон страницы

Урок 10. Прозрачный 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>

Результат:

prozrachnyj fon   css

Посмотреть результат в новом окне: CSS фон и его цвет

Атрибуты и значения


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

<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 картинка - фон определяется с помощью изображения

Например, у нас есть вот такая картинка:

kartinka fon

Напишим следующий код для отдельной страницы:

<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 prozrachnyj fon, primer

CSS прозрачность фона была задана для Internet Explorer и для других браузеров.

Дата публикации: Октябрь 2009 | Обновление: Август 2014

Урок 9. CSS курсоры   CSS фон прозрачный   Урок 11. CSS картинка › фон

    Сохранить в сервисы и закладки