Як зробити прозорий фон html


 

Прозорий фон — один з елементів графічного дизайну, що дозволяє реалізувати завдання оформлення сайту. Він часто використовується на ресурсах різної спрямованості, тому кожному фахівцеві в області сайтобудування корисно знати принципи його створення.


Інструкція

  1. Різниця між прозорим і напівпрозорим фоном полягає в значенні параметра, що позначає ступінь прозорості.
  2. Один зі способів зробити фон напівпрозорим — використовувати атрибут opacity. Однак його властивості поширюються на всі без винятку елементи, які потрапляють в поле дії. Отже, разом з фоном прозорими стають зображення, а також блідне напис. В принципі, opacity може успішно застосовуватися для створення ефекту накладання. Використовується він у такій зв’язці тегів:


    Текст


    • Opacity — значення прозорості.
    • Background: url (адреса картінкі.jpg) — зображення, яке повинно опинитися під фоном.
    • Background: # параметр кольору — колір фону.
    • Padding: 10px — товщина полів елемента.

  3. Ще один варіант, як можна задати прозорість.


    Текст


    • 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).

     
     

    Текст на прозорому / напівпрозорому фоні