Прескочи към основното съдържание Прескочи към навигацията
Допълнения към урока
Учебна програма HTML5 и CSS3
HTML5 и CSS3
7. Скрити елементи, прозрачности и responsive дизайн

Полупрозрачност

Курсове HTML5 и CSS3 Седмица 7 - Скрити елементи, прозрачности и responsive дизайн
-51,13 € за ВЕЛИКДЕН: Вземи курс "HTML5 и CSS3" за    127,31 € 76,18 €  ВИЖ ТУК

Пълен достъп до курса: Не

За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.

Предишен Следващ

HTML5 и CSS3 В курса ще се научите как да създавате съвременни уеб страници с помощта на HTML и CSS. Това обучение е подходящо за напълно начинаещи и ще ви помогне да усвоите основите на уеб разработката, като научите как да създавате структура и стил на уеб страници.

Най-важното за полупрозрачността в CSS

opacity контролира прозрачността на целия елемент заедно със съдържанието му – текст, изображения и фон. Стойностите са от 0 до 1, където 0 е напълно прозрачно, а 1 – напълно видимо. Ако искате само фонът да бъде полупрозрачен, а текстът да остане ясен, използвайте rgba() вместо opacity. Това е ключовата разлика, която трябва да запомните.

Стъпка по стъпка: как да направите фон полупрозрачен

  1. Задайте прозрачност на елемент чрез opacity: 0.5; и наблюдавайте как цялото съдържание става бледо.
  2. Премахнете opacity, ако искате текстът да остане напълно видим.
  3. Задайте фонов цвят чрез background-color с rgb(0, 255, 0);.
  4. Преобразувайте го в rgba(0, 255, 0, 0.5);, където последната стойност (alpha) контролира прозрачността само на цвета.
  5. Тествайте различни стойности между 0 и 1, за да постигнете желания ефект.

Използвани CSS свойства и функции

  • opacity – задава прозрачност на целия елемент (стойности от 0 до 1).
  • background-color – определя фонов цвят на елемент.
  • rgb() – задава цвят чрез стойности за червено, зелено и синьо (0–255).
  • rgba() – добавя alpha канал за прозрачност към RGB (0–1).

Дискусия към урока