Инструкция
1
Разница между прозрачным и полупрозрачным фоном состоит в значении параметра, обозначающего степень прозрачности.
2
Один из способов сделать фон полупрозрачным – использовать атрибут opacity. Однако его свойства распространяются на все без исключения элементы, которые попадают в поле действия. Следовательно, вместе с фоном прозрачными становятся изображения, а также бледнеет надпись. В принципе, opacity может успешно применяться для создания эффекта наложения. Используется он в следующей связке тегов:<html>   <head>   <title>Заголовок</title>   <style>      body {      background: url(адрес картинки.jpg);         }         div {          opacity: 0.6;         background: #параметр цвета;         padding: 10px;          }   </style>   </head><body>      <div>Текст</div></body></html>• Opacity – значение прозрачности.• Background: url(адрес картинки.jpg) – изображение, которое должно оказаться под фоном.• Background: #параметр цвета – цвет фона.• Padding: 10px – толщина полей элемента.
3
Еще один вариант, как можно задать прозрачность.<html>   <head>   <title>Заголовок вкладки</title>      <style type="text/css">         BODY {         background: url(bg.gif);          }         .semiopacity {         position: relative;         width: 100%;         height: 200px;          }         .semiopacity .transparent {         background: #цвет фона;          opacity: 0.5;          filter: alpha(Opacity=50);          height: 100%;          }         .semiopacity .text {         padding: 5px;         position: absolute;         left: 0; top: 0;          }      </style></head><body>      <div class="semiopacity">      <div class="transparent"></div>      <div class="text"> Текст </div></div></body></html>• Background: url(bg.gif) – фоновый рисунок.• Position: relative – относительное позиционирование.• Opacity: 0.5 – значение прозрачности.• Filter: alpha(Opacity=50) – значение прозрачности в IE.• Position: absolute – абсолютное позиционирование. • Left: 0; top: 0 – положение слоя.
4
Для решения поставленной задачи можно использовать возможности программы Adobe Photoshop. Для этого нарисуйте фон с требуемым уровнем прозрачности и сохраните его в формате png, а затем вставьте его в код background: url(opacity.png).<html><head>   <title>Заголовок вкладки</title>         <style type="text/css">         BODY {          background: url(bg.gif);         }         semiopacity {         padding: 5px;          background:url(opacity.png);         }         </style> </head> <body>      <div class="semiopacity"> Текст на прозрачном/полупрозрачном фоне </div></body></html>