Всичко, което трябва да знаете за непрозрачността в CSS

Тази статия ще ви запознае с концепцията, която ще ви помогне да разберете непрозрачността в и да ви кажа как да контролирате този параметър. Следните указания ще бъдат обхванати в тази статия,

• Непрозрачност в CSS
• Непрозрачност, наследена с каскадни елементи
• Настройка на RGBA атрибут за каскадни елементи
• Промени в непрозрачността върху ефекта на задържане

Непрозрачността на фона на елемент е полезна настройка на функцията в HTML дизайна. Като задава нивото на непрозрачност (обратно на прозрачността), дизайнерът може да контролира видимостта на елемента чрез свойството CSS opacity. Това обикновено се използва като настройка на фона, когато има каскадни елементи, поставени един над друг.

Най-често срещаният сценарий, в който се използва тази функция, е следният:

• Частично прозрачно фоново изображение се поставя зад текстов елемент.
• Фоновото изображение се вижда мътно, така че не доминира над текста отпред.
• Изображението може да се фокусира изцяло, когато потребителят изрично реши да го види.

Може да искате да прочетете на преди да се запознаете с непрозрачността на CSS.

За изчерпателен урок за CSS посетете Урок за CSS Edureka за начинаещи . Ще получите отлична информация за начина, по който CSS трябва да се използва за увеличаване на HTML уеб дизайна.

Продължавайки с тази статия за непрозрачността в CSS

Непрозрачност в CSS

В CSS непрозрачността се задава като числова стойност, варираща между 0.0 - 1.0. Стойности по-близки до нула представляват по-голяма прозрачност, видимостта на изображението ще бъде много лека. Нека започнем с пример за изображение, което се показва с 50% прозрачност. Вижте пример 1 по-долу.

как да стана ai инженер -

Пример 1: Фоновото изображение е зададено на полу- прозрачност

img {непрозрачност: 0,5 филтър: алфа (непрозрачност = 50) / * За IE8 и по-стари * /}  

Пример 1: Резултат

Оригинално изображение (100% непрозрачност)

Изображение с настройка 50% непрозрачност

В горния пример имаше само един елемент - изображение. Други елементи също могат да бъдат зададени с параметъра непрозрачност, като текст, div елементи и така нататък.

Продължавайки с тази статия за непрозрачността в CSS

Непрозрачност, наследена с каскадни елементи

Когато елементите са подредени един върху друг, ако фоновият елемент има настройка за непрозрачност, той се наследява от всички дъщерни елементи. Това е настройки по подразбиране . Това означава, че ако върху изображението се постави текстово поле и изображението има настройка за непрозрачност 0,5, изображението и текстовият елемент ще бъдат видими само частично.

Нека вземем екземпляра на детски текстов елемент, поставен върху изображението TOM & JERRY в следващия ни пример. В Пример 2 можем да видим ефекта на непрозрачност по подразбиране.

.container {позиция: относително подравняване на текст: непрозрачност на центъра: 0,5} .центрирана {позиция: абсолютен връх: 50% вляво: 50% трансформация: превод (-50%, -50%) цвят: син размер на шрифта: 40px} } TOM & JERRY

Пример 2: Текстът наследява непрозрачността от родителското изображение

Продължавайки с тази статия за непрозрачността в CSS

Настройка на RGBA атрибут за каскадни елементи

Има и друг начин, по който непрозрачността може да се контролира с каскадни елементи. Ако искате дъщерният елемент да остане незасегнат от непрозрачността на неговия фонов елемент, тогава можете да го използвате Настройка на RGBA атрибут .

Пример 3: Използване на RGBA настройка

фон: rgba (76, 175, 80, 1.0) / * Изображението няма настройка за непрозрачност * / / * Зелен фон за текст със 100% непрозрачност * / / * Синият цвят на текста има 100% непрозрачност * /

фон: rgba (76, 175, 80, 0,4) / * Изображението няма настройка за непрозрачност * / / * Зелен фон за текст с 40% непрозрачност * / / * Синият текст все още се вижда със 100% непрозрачност * /

След цветния код RGB, атрибут „а“ означава алфа . The алфа параметър е число между 0.0 (напълно прозрачно) и 1.0 (напълно непрозрачно).

Продължавайки с тази статия за непрозрачността в CSS

Промени в непрозрачността върху ефекта на задържане

В някои сценарии уеб дизайнерите искат непрозрачността да варира в зависимост от това дали потребителят е фокусиран върху елемента или не. Да приемем например, че изображението е зададено на 50% непрозрачност по подразбиране. Когато обаче потребителят задържи мишката върху изображението, ние искаме изображението да се фокусира изцяло със 100% непрозрачност.

Пример 4 показва как се прави това.

Общи бележки:

• Настройката на непрозрачността е алтернатива на използването на атрибута ‘видимост’ в CSS. Използването на настройката за непрозрачност обаче улеснява задаването на различна степен на прозрачност, варираща от нула до пълна.
• Нивото на непрозрачност трябва да бъде зададено след внимателно тестване в различни браузъри. Когато непрозрачността е зададена на ниски стойности, понякога текстът или изображението могат да станат напълно невидими или нечетливи.
• Идеята на използването на непрозрачността е да се съсредоточи рязко върху някои елементи, докато други фонови елементи не разсейват вниманието на потребителя. Така че такива фонови елементи се задават с по-ниска непрозрачност.
• В Internet Explorer, за IE8 и по-стари версии, свойството opacity е настройка „филтър“, варираща от 1 до 100. Във всички останали браузъри тя варира от 0 до 1.

Това ни води до края на тази статия за непрозрачността в CSS.

Ако се интересувате да научите повече за уеб разработката, разгледайте от Edureka. Обучението за сертифициране на уеб разработки ще ви помогне да научите как да създавате впечатляващи уеб сайтове с помощта на HTML5, CSS3, Twitter Bootstrap 3, jQuery и Google API и да го внедрите в Amazon Simple Storage Service (S3).

Ако все още се интересувате Ако имате някакъв въпрос, можете да го публикувате в раздела за коментари в този блог „Непрозрачност в CSS“ и ние ще се свържем с вас възможно най-скоро.