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

33

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

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

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

А що передбачено в самому css для використання напівпрозорих фонів? В останні роки в ньому з’явилася можливість визначати колір тексту або заднього плану в колірному rgba. Якщо ви працюєте у графічних редакторах, то напевно знаєте про нього. Колір rgba визначається так:

background: rgba(частка червоного, частка зеленого, частка синього, прозорість)

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

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

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

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

#ct{
position: absolute;
width: 600px;
height: 400px;
background: rgb(255, 234, 13)
}
#ab{
width: 600px;
height: 400px;
position: absolute;
background: url(star.png)
}

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

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

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

background: rgba(255, 234, 13, 0.5).

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

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

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

#ct{
width: 600px;
height: 400px;
background: url(bg.png);
padding-top: 100px;
}
.block{
width: 400px;
height: 300px;
margin: 0 auto;
background: pink;
border-radius: 25px;
}

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

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

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

background: rgba(210, 121, 166, 0.28);

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

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

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

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

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

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

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

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