Як зробити в css напівпрозорий фон

Напівпрозорість в веб-дизайні

Останнім часом в Сайтобудування активно застосовуються різні прийоми, пов'язані з прозорістю. Це дозволяє створювати красиві шапки сайтів і безліч різних декоративних елементів. Завдяки формату PNG-24 сьогодні є можливість вставляти на веб-сторінку напівпрозорі зображення самих різних форм.

Перші три значення записуються числовими значеннями від 0 до 255, де 255 - найбільша частка кольору. Прозорість визначається по-іншому - від 0 до 1. Якщо записати 0, то ефект буде такий же, як при background: transparent, тобто при повністю прозорий фон.

Навіщо все це потрібно

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

Якщо ж вам потрібно, щоб основний суцільний колір просвічувався і через нього було видно нашу картинку, то для цього і використовується колірний режим rgba. Наприклад, я створю в html-документі два блоки з довільними ідентифікаторами.

Блоки ідентичні один одному у всьому, крім фону. Завдяки абсолютному позиціонуванню вони стоять на одному і тому ж місці - в верхньому лівому кутку сторінки, але оскільки блок #ct варто в html-розмітки останнім, він повністю перекриває свого товариша і на сторінці ми побачимо просто жовтий суцільний фон.

У той же час бачимо, що у #ab є якась фонова картинка, але ми її не побачимо, потім що у #ct НЕ напівпрозорий фон і через нього нічого не просвічується. Все тому, що ми задали колір в режимі rgb, а він не додає напівпрозорість, яка нам так потрібна в даному випадку. Давайте змінимо стиль для #ct:

Оновлюємо сторінку і бачимо замість суцільного жовтого більш тьмяний відтінок, а через нього видно зірочки, які і були фоновим зображенням нашого блоку #ab. Ось це і є робота режиму rgba.

Тепер давайте разбрем інший приклад. Видалимо один з блоків, а всередині залишився створимо дочірній елемент, якому теж призначимо свої стилі.

Отцентріруем дочірній елемент, дамо фонове зображення основного контейнеру і бажаний колір для блоку всередині нього. Знову ж таки, через відсутність напівпрозорості фон батьків не буде просвічуватися.

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

Тепер, якщо оновити сторінку, ми бачимо, що через колір в дочірньому блоці видно той красивий орнамент, який заданий для загального контейнера.

Де це може стати в нагоді в Сайтобудування?

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

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

Іншим прикладом використання може бути той, що ви могли бачити вище. У основного контейнера була красива фонова картинка. Відповідно, щоб цей орнамент було видно і через фоновий колір дочірніх елементів, його також потрібно записати в rgba.

Ну а як зробити повністю прозорий фон в css? Вище я писав, що для цього можна записати властивість background: transparent, або ж задати 0 в якості четвертого значення при записі кольору в режимі rgba. Інший прийом - записати блоку властивість opacity зі значенням 0, але тоді весь блок буде прозорим, тобто невидимим.

Більше інформації ви можете дізнатися з нашого курсу по css3. де є відповідний урок по напівпрозорої і властивості opacity. Дивіться і вивчайте його, щоб ще краще розібратися в цих властивостях. На цьому я закінчую статті і бажаю вам успіхів у вивченні веб-технологій. Залишайтеся з webformyself, щоб дізнаватися ще більше.

Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі