Как сделать прозрачный фон в css

4 года назад

Человек-Молекула

Присоединяйтесь к нашему Telegram-сообществу

Ответы

Для управления прозрачностью фона в CSS есть два инструмента - opacity и rgba. Основное отличие этих инструментов в том, что rgba можно применить точечно, к конкретному элементу, opacity же влияет и на дочерние теги в том числе.

Исходный HTML документ:

<div class="block1"></div>
<div class="block2"></div>

CSS:

div{
  width: 300px;
  height: 300px;
  /* Расположим оба блока друг над другом, чтобы показать эффект прозрачности */
  position: absolute;
  top: 20px;
  left: 20px;
}

.block1 {
  /* фон первого блока - картинка */
  background-image: url('1.jpg');
}

.block2 {
  /* второй блок сделаем меньше для наглядности */
  width: 200px;
  height: 200px;
  /* Вариант №1 */
  /* background-color: red; */
  /* opacity: 0.7;   */

  /* Вариант №2  */
  background-color: rgba(255, 0, 0, 0.7);
}

Результат: opacity_example

3 года назад

Вячеслав Межуревский

1 месяц

Позиционирование в CSS

Навык разработки адаптивных интерфейсов, позволяющий создавать удобные и функциональные решения для различных устройств

5 месяцев

Профессиональная верстка

Навык адаптивной вёрстки с современными подходами для корректного отображения сайтов на любых устройствах и разрешениях

1 месяц

Анимация CSS

Навык создания анимаций в CSS для улучшения пользовательского опыта и повышения востребованности на рынке

1 месяц

SASS

Навык работы с препроцессором SASS для эффективной и структурированной стилизации веб-приложений

1 месяц

Основы веб-разработки

Основы HTML, CSS, блочная модель, основы Javascript, синтаксис, арифметика, условия, циклы, функции, поиск ошибок

Похожие вопросы