Как да си направим прозрачен фон в CSS
Здравейте скъпи читатели!
В тази статия бих искал да говоря с теб за това доста интересни ефекти като прозрачност за различните елементи на сайта, а по-скоро, как да се създаде прозрачност CSS фон или всяко друго устройство на страницата на сайта.
Придвижване статията:
Като основа за вашия сайт, вие винаги искате да го интересен и индивидуален дизайн правят. Има редица от специални ефекти, методите на действие и различни трикове, които можете да използвате, за да се постигне желания дизайн. По този начин, по-специално с помощта на CSS3 функции може да се постигне наистина впечатляващи резултати.
Благодарение на прозрачност CSS фон може да се реализира от двата най-простите начини:
- 1. Използвайте непрозрачност CSS-собственост.
- 2. Използване формат RGBA да зададете на заден план.
С помощта на CSS-непрозрачност имот
Непрозрачност е универсален инструмент, а с него и можете да настроите желаното ниво на прозрачност в CSS за всеки елемент на страницата, както и за фон.
Синтаксис свойства на CSS:
ако стойността е в диапазона от 0.0 (елемент е напълно прозрачен) до 1.0 (напълно прозрачен елемент).
Така, например, направи блок с фон клас. и питам за това, за по-голяма яснота, фоновото изображение. Това устройство ще постави два блока с текста и opas1 opas2. за които ние определяме черен фон. Тогава за втория блок съхранение непрозрачността на стойности, равна на 0,3.
Ето какво се случва:
Блок без прозрачност
Демонстрация на имоти CSS непрозрачност
Както можете да видите, CSS собственост на работа, устройството с opas2 клас стана прозрачен и чрез него се различи фоновото изображение.
Но има един неприятен момент. Както можете да видите, текстът е избледнял, което означава, стана ясно също. Това се случи, се дължи на факта, че всички деца елементи на блока, в нашия случай - на текста, наследена прозрачност, определени в CSS.
Оказва се, че на CSS-Имотът, който може да използвате, за да се получи прозрачен блок на страницата, само ако той не съдържа текст.
И какво да правим, ако искаме да се уточни в прозрачността на CSS фон за устройството, но запази разбираемостта на текста, съдържащ се в него?
фон задача в RGBA
Се избегне този проблем, ние можем в този случай, ако се откажем от използването на непрозрачност и посочите стойност за CSS имоти фон в RGBA формат.
RGBA формат ни дава възможност за задаване на цвета с помощта на червени, зелени и сини цветове, както и десетична, както и, ви позволява да настроите прозрачността чрез използването на алфа канал. алфа нивото е зададена в рамките от 0 до 1. Това означава, че точно както и в непрозрачност CSS-имота.
Подобно на това:
фон: RGBA (255,255,255,0.6);
За по-голяма яснота, добавете блок на заден план е друг елемент на текста, за които ние посочете в фон RGBA формат CSS с 0,3 степен на прозрачност.
Това е, което ние имаме:
Блок без прозрачност
Демонстрация на CSS-непрозрачност на имота
Ето фон RGBA на