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

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

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 прозрачность фона была задана для Internet Explorer и для других браузеров.

Автор проекта - Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

CSS курсоры Прозрачный CSS фон и картинка CSS картинка и фон