Как сделать прозрачный фон html?

Прозрачный фон – один из элементов графического дизайна, позволяющий реализовать задачи оформления сайта. Он часто используется на ресурсах разной направленности, поэтому каждому специалисту в области сайтостроения полезно знать принципы его создания.
Создать сайт самостоятельно с Wix.com

Инструкция

Разница между прозрачным и полупрозрачным фоном состоит в значении параметра, обозначающего степень прозрачности.

Один из способов сделать фон полупрозрачным – использовать атрибут opacity. Однако его свойства распространяются на все без исключения элементы, которые попадают в поле действия. Следовательно, вместе с фоном прозрачными становятся изображения, а также бледнеет надпись. В принципе, opacity может успешно применяться для создания эффекта наложения. Используется он в следующей связке тегов: Заголовок body { background: url(адрес картинки.jpg); } div { opacity: 0.6; background: #параметр цвета; padding: 10px; } Текст • Opacity – значение прозрачности.• Background: url(адрес картинки.jpg) – изображение, которое должно оказаться под фоном.• Background: #параметр цвета – цвет фона.• Padding: 10px – толщина полей элемента.

Еще один вариант, как можно задать прозрачность. Заголовок вкладки 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; } Текст • Background: url(bg.gif) – фоновый рисунок.• Position: relative – относительное позиционирование.• Opacity: 0.5 – значение прозрачности.• Filter: alpha(Opacity=50) – значение прозрачности в IE.• Position: absolute – абсолютное позиционирование. • Left: 0; top: 0 – положение слоя.

Для решения поставленной задачи можно использовать возможности программы Adobe Photoshop. Для этого нарисуйте фон с требуемым уровнем прозрачности и сохраните его в формате png, а затем вставьте его в код background: url(opacity.png). Заголовок вкладки BODY { background: url(bg.gif); } semiopacity { padding: 5px; background:url(opacity.png); } Текст на прозрачном/полупрозрачном фоне

Оцените статью!