Фіксований і прозорий фон сайту, mnogoblog

Тут хотілося б розповісти вам про цікавий візуальний ефект, який створюється завдяки використанню двох чудових властивостей фону (background): прозорість і фіксованість.
Завантажити вихідні для статті можна нижче

За допомогою даного ефекту можна створити оригінальний дизайн сайту, для прикладу створимо ось такий:

Демо приклад можна подивитися за цим посиланням:

Але для початку приступимо до теорії.

Давайте розглянемо окремо кожне з цих властивостей.

1. Фіксований фон сайту.

Тег background-attachment встановлює, чи буде прокручуватися фонове зображення разом з вмістом елементу.

Зображення може бути зафіксовано і залишатися нерухомим, або переміщатися разом з документом.

Тег background-attachment може набувати таких значень:

fixed - Робить фонове зображення елемента нерухомим.
scroll - Дозволяє переміщатися фону разом з вмістом (використовується за умовчанням).
inherit - Успадковує значення батька.

Для того, щоб створити фіксований, нерухомий фон сайту, необхідно прописати в файлі стилів (style.css) наступний рядок:

Причому даний тег можна використовувати і для окремих елементів сайту, таких наприклад як div (блоки) і ін.

Дана властивість буде виглядати набагато ефектніше, якщо додати замість фону картинку за допомогою наступного тега:

Де '... / image.jpg' - шлях до фонової картинки.
Наприклад так:

Також потрібно нагадати вам про тезі background-repeat. який задає як буде повторюватися фонове зображення.
Можна встановити повторення малюнка тільки по горизонталі, по вертикалі або в обидві сторони.
Нам же для створення фіксованого фону сайту цікаво таке значення даного тега:
no-repeat - Встановлює одне фонове зображення без його повторень.

2. Прозорість фону сайту.
Тут нам знадобиться тег opacity.
Він визначає рівень прозорості елемента веб-сторінки.
При часткової або повної прозорості через елемент проступає фоновий малюнок або інші елементи, розташовані нижче напівпрозорого об'єкту.

Тут слід вказати те, що Internet Explorer до версії 9.0 для зміни прозорості використовує фільтри, для цього браузера слід записати filter: alpha (opacity = 50), де параметр opacity може приймати значення від 0 до 100.

Але ми будемо користуватися саме тегом opacity. який працює у всіх браузерах окрім Internet Explorer.

Даний тег записується в такий спосіб:

Де x - може приймати значення в межах 0.0 - 1.0. Менше значення робить елемент більш прозорим.
приклад:

Причому даний тег можна використовувати і для окремих елементів сайту, таких наприклад як div (блоки) і ін.

Тепер приступимо до практики і створимо ось такий сайт завдяки поєднанню вищезгаданих властивостей фону.

Для створення даного ефекту нам знадобитися всього лише завантажити фонове зображення і підкоригувати файл стилів (style.css) шаблону (теми) сайту.

Для прикладу, наведеного нижче, я буду використовувати тему під назвою "Europe". дана тема є на wordpress.org, тому щоб її встановити або завантажити досить в панелі вашого сайту вибрати в лівому меню пункт "Зовнішній вигляд", далі підпункт "Теми оформлення", перейти на закладку "Установка тем оформлення" і в рядку пошуку ввести Europe .

Справа в списку шаблонів вибираємо файл style.css і відкриваємо його.

І шукаємо в його коді тег BODY.

Тепер додамо до нього фонове зображення і додамо фону властивість нерухомості (фіксований фон):

Далі нам треба додати для шапки, футера, контенту і сайдбара (конкретно для його віджетів) властивість прозорості.

Змінюємо прозорість контенту.
Для цього знаходимо тег content і міняємо в ньому наступний код:

Змінюємо прозорість футера (підвалу).
Для цього знаходимо тег footer і міняємо в ньому наступний код:

Змінюємо прозорість сайдбара (більш ефектніше буде поміняти прозорість віджетів сайдбара).
Для цього знаходимо тег widgets і міняємо в ньому наступний код:

Також для виділення заголовка віджетів. можна змінити його колір і також поставити прозорість.

Можна знайти наступний код:

І поміняти його на:

Змінюємо прозорість шапки.
Для цього знаходимо тег header:

Тут я просто додав рядки і отримав наступне:

Схожі записи:

Навігація по публікаціям

На рахунок прозорості не так інтересно..больше сподобалося «як закріпити фон»

Дякую за змістовну статтю. Збиралася в фотошопі робити напівпрозорі елементи, тепер зроблю за допомогою стилів. Тільки питання: треба напевно якось оптимізувати таку велику картинку? Щоб сайт швидко завантажувався.

Дуже круто! Але як зробити щоб тільки блок був прозорим, а вміст немає. А то у мене і текст в блоці і картинки теж стали прозорими ...

Для блоків можна спробувати зробити напівпрозору png або gif фонову картинку.

Приєднуюся до Микити. Наприклад, сайд-бар у мене прозорий, і моя фотографія вгорі сайд-бару теж стала прозорою, що негарно, т. К. Просвічує фон. Як зробити, щоб фото було непрозорим?
Дякуємо.

У мене зовсім нічого не вийшло. Я б заплатив, якби хто-небудь допоміг мені позбутися від цієї проблеми. HELP ME.

Мені б теж хотілося дізнатися, як зробити прозорим тільки сам блок, але не його вміст.

Спасибі вам велике! Завдяки вашій статті нарешті вийшло зробити прозорість на сайті)

Вітаю! Підкажіть, будь ласка, як змінити прозорість, наприклад, стрічки (тобто прозорість фону для тексту) не змінюючи прозорість фонової картинки і самого тексту?

на моєму сайті земляпермскогокрая.рф там де текст не виходить зробити білий фон прозорим хоч і прочитав статтю уздовж і поперек

Добрий день всім ... Справа в тому що в мене не виходить знайти в коді то що ви описуєте ... може тема сама все заховала і не по тих місцях? ви б не могли мені допомогти? а то я вже голову зламала)) зпранее спасибі

тема у мене «Tempera» працюю на wordpress ... як і де мені шукати в коді то що відповідає за блок контенту? ((

Дякую за статтю, на своєму блозі не всі застосовне звичайно, але деякі ідеї сподобалися)