Css прозрачность фона: CSS: прозрачность фона и картинки

 <дел>
<дел>
<дел>
<дел>
<дел> 

 <дел>
  

Дополнительные сведения о функциях адаптивного дизайна Tailwind см. в документации по адаптивному дизайну.

Настройка

Чтобы одновременно настроить значения непрозрачности для всех связанных с непрозрачностью утилит, используйте раздел opacity конфигурации темы

 // tailwind.config.js
  модуль.экспорт = {
    тема: {
      продлевать: {
        непрозрачность: {
+ «15»: «0,15»,
+ '35': '0,35',
+ '65': '0,65',
        }
      }
    }
  } 

Если вы хотите настроить только утилиты прозрачности фона, используйте backgroundOpacity раздел:

 // tailwind. config.js
  модуль.экспорт = {
    тема: {
      продлевать: {
        Непрозрачность фона: {
+ «10»: «0,1»,
+ «20»: «0,2»,
+ '95': '0,95',
        }
      }
    }
  } 

Дополнительные сведения о настройке темы по умолчанию см. в документации по настройке темы.

Варианты

По умолчанию для утилит управления непрозрачностью фона генерируются только адаптивный, темный режим (если включен) , групповое наведение, фокус внутри, наведение и фокус.

Вы можете контролировать, какие варианты создаются для утилит прозрачности фона, изменив свойство

Например, эта конфигурация также будет генерировать активные варианты:

 // tailwind.config.js
  модуль.экспорт = {
    варианты: {
      продлевать: {
        // ...
+ backgroundOpacity: ['активный'],
      }
    }
  } 

Отключение

Если вы не планируете использовать утилиты прозрачности фона в своем проекте, вы можете полностью отключить их, установив для свойства backgroundOpacity значение false в разделе corePlugins вашего файла конфигурации:

 // tailwind . config.js
  модуль.экспорт = {
    основные Плагины: {
      // ...
+ backgroundOpacity: ложь,
    }
  } 

←Цвет фонаBackground Origin→

Редактировать эту страницу на GitHub

На этой странице 9Ссылка на класс по умолчанию

Назад Руководство для начинающих по использованию CSS-эффектов непрозрачности фона

Визуальные элементы составляют большую часть работы и удовольствия от использования CSS. Одним из наиболее интересных визуальных вариантов является использование CSS-эффекта непрозрачности фона. В этом кратком руководстве вы узнаете, как управлять непрозрачностью изображения, чтобы добиться собственной прозрачности.

Руководство содержит примеры кода и выходные изображения для помощи. Если вам нужны какие-либо подробности об основах HTML или CSS , посты HTML для чайников и Основы CSS для начинающих — это два быстрых чтения, которые помогут вам начать работу.

Прозрачный фон может стать отличным выбором стиля для оформления контента. Текст и элементы меню могут использовать прозрачный фон, чтобы привлечь внимание к содержимому на переднем плане. . Вместо того, чтобы использовать обычный цветной фон, вы можете работать с полупрозрачным изображением, чтобы добавить изюминку в общий дизайн.

Чтобы объяснить метод применения изменения непрозрачности, будет использован пример кода HTML. В приведенном ниже примере для размещения целевого изображения в теле использовался один тег изображения.

Без добавления стилей к странице мы можем отобразить следующее:

Теперь, когда изображение находится на HTML-странице, процесс настройки прозрачности можно выполнить в CSS. Свойство CSS Opacity принимает числовые значения в диапазоне от 0,0 до 1,0. Эти значения представляют интенсивность непрозрачности, примененную к изображению. Чем меньше значение, тем более прозрачным будет элемент. Значение 1.0 не покажет видимого изменения непрозрачности.

В приведенном ниже примере значение непрозрачности фона CSS было установлено на 0,5. Это среднее значение обеспечивает заметное изменение изображения.

Настройка контейнеров DIV поверх прозрачного изображения

Также можно установить фон как прозрачное изображение. Хотя в настоящее время нет прямого свойства CSS, чтобы просто напрямую установить прозрачность фона, вы все равно можете использовать CSS, чтобы сделать это возможным.

В приведенном ниже примере HTML-документа вы можете видеть, что было добавлено несколько новых элементов. Ненумерованный список, другой заголовок и отдельное изображение. Все это должно отображаться перед фоновым изображением.

Установка непрозрачности изображения для родительского элемента также передает ее всем дочерним элементам. Это становится проблемой, когда вы не хотите, чтобы непрозрачность наследовалась. Контент может стать трудным для взаимодействия, если проблема не будет решена.

Эту проблему можно решить несколькими способами. В следующих примерах вы увидите один из этих методов. В примере кода HTML вы могли заметить, что было настроено три элемента div.

Первый div с идентификатором « theContainer» используется для хранения фона и другого содержимого внутри него. Обратите внимание, что это пример, и вы можете применить ту же идею и к телу. Следующий div действует как контейнер для фонового изображения, которое будет установлено. В последнем div будет отображаться содержимое страницы.

Если на странице установлено содержимое HTML, в таблицу стилей можно добавить эффекты CSS. Пожалуйста, взгляните на пример кода CSS ниже.

Первый div с идентификатором « theContainer ” имеет значение относительного положения. Далее идет второй div с классом « imageContainer. » Здесь загружается фоновое изображение. В этом разделе также задается CSS-эффект непрозрачности фона.

Наконец, элемент div, отмеченный классом « textContainer », определяет расположение текстового содержимого, которое будет располагаться перед фоном изображения. Обратите внимание, что другое изображение также должно быть загружено в третий div.

Стиль CSS затем применяется к элементам абзаца, списка и изображения в HTML-документе. Вы можете увидеть эти изменения в примере кода CSS ниже.

При использовании приведенного выше CSS документ HTML отображается, как показано ниже.

Фон имеет эффекты непрозрачности из таблицы стилей CSS. Содержимое из другого контейнера div также отображается на странице без наследования тех же настроек непрозрачности из CSS.

Самое замечательное в веб-дизайне то, что он постоянно растет и адаптируется. Эффекты непрозрачности — это просто один из способов заставить его работать на данный момент. Если вы следите за темой непрозрачности фона в CSS, вы можете заметить, что кто-то разработал более эффективный процесс для решения этой проблемы.