Как да задам прозрачност на фоновото изображение в CSS? CSS прозрачност на фона. Прозрачен фон или текст с CSS Сив полупрозрачен фон

Здравейте всички. Както може би знаете, фонът е свойство на CSS, което ви позволява да зададете цвета на фона или да качите изображение, което да действа като фон. CSS3 въведе и възможността за създаване на линейни и радиални градиенти, но това е тема за отделна статия. В същия исках да ви кажа как да зададете прозрачност за свойството на фона в css.

Задайте прозрачност за css фон

И така, всичко това се прави много просто благодарение на такъв формат за цветен запис като rgba. Ако работите с графични редактори, вероятно знаете, че цветовият режим rgb се декодира, както следва: пропорцията на червеното (червено), пропорцията на зеленото (зелено) и синьото (синьо). И така, rgba е почти същото, само че се добавя още един параметър - прозрачност. Написано е така:

Цвят на фона: rgba(173, 57, 22, 0.5)

Първо, ние изрично посочваме, че задаваме цвета в режим rgba. След това посочваме стойностите на наситеност на трите основни цвята от 0 до 255, където 255 е най-високата наситеност. Четвъртият параметър е нашата прозрачност. Тук стойността се записва от 0 до едно. 1 е напълно непрозрачен елемент, а 0 е напълно прозрачен елемент. Съответно, ако го зададете на 0, тогава цветът на фона изобщо няма да се вижда.

Сега знаете как да зададете прозрачност за свойството на фона в css. За да направите това, трябва да използвате цветовия режим rgba. Има и свойство за непрозрачност, но то се отнася за целия елемент като цяло. Тоест при прилагане на непрозрачност може да се приложи и прозрачност към текста, което ще го направи нечетлив.

Пример за прозрачен фон

Предимствата на полупрозрачния фон са лесни за показване с пример. Например, имаме общ фон на страницата. Ето как би изглеждал блокът, ако получи плътен черен цвят:

А сега нека зададем същия черен цвят на блока, но го уточним с помощта на цветовия формат rgba, като последната стойност е 0,7, например. Ще се получи така:
Сега фонът на блока е полупрозрачен и фоновото изображение се вижда през него. Тази снимка и фон са само за илюстрация. Както разбирате, в css прозрачността на фона може да бъде полезна, когато имате нужда фонът на вложен елемент да се показва, без да закрива други фонове, разположени в други слоеве.

Самият цвят не е труден за настройка с помощта на rgba. Както вече споменахме, първите три букви означават трите основни цвята: червено, зелено и синьо, или по-скоро техния дял (от 0 до 255). Чрез задаване на различни стойности можете да получите милиони различни цветове, а полупрозрачността ще ви позволи да измислите много красиви ефекти за сайта, ако е необходимо.

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

Да видим как можем направете прозрачен фон за изображението с помощта на редактораAdobeфотошоп. Имам инсталирана английската версия на Adobe Photoshop CS5, така че ще я покажа на нея.

Ще се опитам да дам различни комбинации от горещи клавиши.

Ако все още нямате инсталиран Photoshop, рядко го използвате или е на английски, можете да направите прозрачен фон в Paint.net. Това е прост редактор на изображения на руски език, който няма да заема много място на вашия твърд диск. Като кликнете върху връзката, можете да прочетете подробната статия. Можете да изтеглите програмата Paint.net от нашия уебсайт.

Да започнем с един прост пример. Да предположим, че имате изображение на обикновен фон, то може да бъде лого или име на нещо. Нека направим това лого или надпис на прозрачен фон във Photoshop.

Отворете желаното изображение в редактора. Сега нека направим прозрачен фон за слоя. В прозореца "Слоеве" щракнете двукратно върху добавения слой - срещу него ще има заключване. Ще се отвори прозорец за нов слой, щракнете върху OK. След това ключалката ще изчезне.

Изберете инструмента Magic Wand. В лентата със свойства посочете нивото на чувствителност, задайте различни стойности, за да разберете как работи, например 20 и 100. За да премахнете избора от снимката, натиснете "Ctrl + D".

Задайте чувствителността и натиснете вълшебната пръчица върху областта на фона. За да добавите към избрания фон онези части, които не са избрани, задръжте натиснат клавиша "Shift" и продължете селекцията. За да изтриете избраните области, щракнете върху „Изтриване“.

Сега, вместо фон, шахматна дъска - това означава, че успяхме да направим белия фон прозрачен. Премахнете селекцията - "Ctrl + D".

Ако имате изображение или снимка с много различни цветове и обекти, нека да разгледаме как да направите прозрачен фон за изображение във Photoshop.

В този случай ще използваме инструмента за бърз избор. Щракваме върху магическата пръчка с левия бутон на мишката с леко забавяне и избираме желания инструмент от менюто.

Сега трябва да изберем обекта, който искаме да оставим на прозрачен фон. В лентата със свойства задайте различни размери и щракнете върху обекта, като добавите области към него. Ако погрешно е маркиран ненужен фон, натиснете "Alt" и го премахнете.

Натиснете "Q", за да видите резултата. Частите от изображението, които стават прозрачни, ще бъдат маркирани в розово.

Копирайте избраните области, като натиснете "Ctrl + C". След това създайте нов файл, "Ctrl + N", с прозрачен фон.

Поставете копираните фрагменти в него, "Ctrl + V". Ако върху тях има ненужни части от фона, премахнете ги с инструмента Eraser. Запазваме изображения, направени на прозрачен фон в PNG или GIF формат.

Направете белия фон на картина прозрачен или направете прозрачен фон за отделни фрагменти от цветно изображение или снимка във Photoshop. След това можете да ги използвате, където е необходимо: да ги поставите на сайта, да ги добавите към друга снимка или да направите интересни колажи.

CSS прозрачност на фона

Прозрачността на фона на сайта се създава чрез CSS свойства. Има два начина за постигане на прозрачност: чрез свойството opacity и background:rgba(). Нека да разгледаме всеки от тях и след това да направим сравнение.