Opacity css: opacity — CSS: Cascading Style Sheets

Полностью прозрачный

Наконец, давайте возьмем наш пример и сделаем наш элемент полностью прозрачным или невидимым.

CSS будет выглядеть так:

 div { border: 2px сплошной красный; фон: светло-желтый; отступ: 10 пикселей; }
p {граница: 3px сплошной синий; фон: голубой; непрозрачность: 0; } 

HTML будет выглядеть так:

 

  
Это первый абзац, написанный techonthenet.
  com.

  
Это второй абзац, написанный techonthenet.com.
 

Результат будет выглядеть следующим образом:

В этом примере непрозрачности CSS мы теперь установили свойство непрозрачности на 0 для тега

, что делает элемент

полностью прозрачным или невидимым.

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

Непрозрачность цвета используется для определения прозрачности цвета в CSS. Он используется для определения четкости цвета. Альфа-значение определяет прозрачность цвета в «RGBA», а свойство «непрозрачность» используется для установки непрозрачности или прозрачности цвета. Мы можем установить непрозрачность цвета фона в CSS, используя свойство opacity и альфа-значение. Его значение от «0.0» до «1.0». Значение «0,0» используется для полностью прозрачного цвета, а «1,0» — для полностью непрозрачного цвета. В этом уроке мы будем использовать эти значения непрозрачности для изменения непрозрачности цветов. Мы рассмотрим примеры и покажем вам разницу в цветах, когда мы используем значение непрозрачности с исходным цветом.

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

Это изображение HTML-кода, упомянутого выше. Мы изменим непрозрачность цвета фона всех заголовков и покажем вам цвет с разными значениями непрозрачности.

Мы собираемся создать файл CSS, в котором мы используем свойство CSS для изменения непрозрачности цвета фона вышеуказанных заголовков. В этом коде мы используем свойство CSS «непрозрачность».

Для заголовка 1 «h2» мы устанавливаем «цвет фона» на «желтый». «Непрозрачность» для этого заголовка составляет «0,4», а цвет шрифта — «черный». Заголовок 2 «фоновый цвет» также «желтый», но «непрозрачность» здесь равна «0,6». «Фоновый цвет» заголовка 3 также «желтый», но на этот раз «непрозрачность» равна «0,8». Теперь идет заголовок 4. Его «фоновый цвет» такой же, как и у предыдущих заголовков, но мы не используем здесь цвет «непрозрачность». Таким образом, «фоновый цвет» четвертого заголовка выглядит как исходный «желтый» цвет.

Вывод:

В этом выводе показана разница в значении непрозрачности цвета фона. Вы можете увидеть разницу между непрозрачностью цвета на этом изображении.

Цвет фона первого заголовка обеспечивает большую прозрачность, поскольку значение непрозрачности цвета фона равно «0,4». Второй заголовок менее прозрачен, чем цвет фона первого заголовка, поскольку его значение непрозрачности равно «0,6». Затем, как и у второго заголовка, цвет фона третьего заголовка менее прозрачен, чем у второго. На этот раз «непрозрачность» равна «0,8». И в последнем заголовке мы использовали исходный желтый цвет без использования какого-либо значения непрозрачности.

В этом HTML-коде у нас есть два заголовка и четыре абзаца. Каждый абзац написан внутри класса «div», и эти классы «div» называются «первый», «второй» и «третий» соответственно. Мы будем использовать эти имена div, когда будем стилизовать эти абзацы в CSS. Мы изменим непрозрачность цвета фона каждого абзаца.

Это код CSS, в котором мы устанавливаем цвет заголовка 1 как «зеленый». Текст заголовков 1 и 2 выравнивается по «центру» с помощью «text-align». Установите «зеленый» цвет фона «div», используя «RGB (0, 151, 19)». «Отступ» составляет «10 пикселей» слева, справа, сверху и снизу. Используемое здесь «выравнивание текста» — это «выравнивание». Теперь используйте первый div, где мы изменили цвет фона на зеленый со значением непрозрачности «0,2» и записали в виде «RGBA (0, 151, 19, 0,2)». «Значение непрозрачности» здесь равно «0,2». Значение «альфа» представляет «непрозрачность». Цвет фона второго div также зеленый с альфа-значением «0,4». Альфа-значение для третьего div равно «0,7» с тем же зеленым цветом.

Вывод:

Здесь вы можете видеть, что первый абзац имеет большую прозрачность, чем второй абзац, потому что значение альфа или непрозрачности для первого абзаца равно «0,2», что означает, что он имеет непрозрачность «20%». Непрозрачность или альфа-значение второго абзаца составляет «0,4», и он менее прозрачен, чем первый абзац. В цвете фона третьего абзаца значение альфа равно «0,7», и вы заметите, что он менее прозрачен. В последнем абзаце цвет фона — исходный «зеленый» цвет. Мы не использовали альфа-значение в последнем заголовке.

В третьем примере мы собираемся написать разные заголовки в HTML с помощью «id», а позже использовать этот «id» для придания этим заголовкам разных стилей в CSS.

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

Здесь мы используем идентификатор абзаца, а затем задаем цвет фона для всех абзацев. Для «p1» мы устанавливаем «rbga (255, 0, 0, 0,3)», который является кодом «красного» цвета с альфа-значением «0,3». Для «p11» мы используем тот же цвет, но без значения альфы или непрозрачности. «p2» устанавливается как «rgba (0, 255, 0, 0,4)», который является кодом «зеленого» цвета, а его альфа-значение равно «0,4». Затем «p22» имеет тот же «зеленый» цвет без альфа-значения. Значение rgba «p3» равно «(0, 0, 225, 0,5)», что является «синим» цветом с альфа-значением «0,5». «p33» имеет исходный «синий» цвет и не имеет непрозрачности. «p5» имеет значение непрозрачности «0,7» и цветовой код «rgba (255, 255, 0, 0,7)», что означает «желтый». «p55» не содержит альфа-значения. Цвет «p6» — «розовый» со значением непрозрачности «0,8», а код записывается как «rgba (255, 0, 255, 0,8)». Последний абзац, «p66», имеет «фоновый цвет» «розовый» без прозрачности.

Здесь цвет фона первого абзаца красный, но со значением непрозрачности 0,3, что делает его более прозрачным. Следующий абзац содержит исходный красный цвет фона, и вы можете легко заметить разницу между исходным цветом и цветом, когда мы используем значение непрозрачности. В третьем абзаце цвет фона отображается зеленым цветом со значением непрозрачности «0,4». В четвертом абзаце цвет фона «зеленый» без альфа-значения. Отображается «синий» цвет пятого абзаца, а его значение непрозрачности равно «0,5». Исходный «синий» цвет фона также показан в «шестом» абзаце. В следующем абзаце показан «серый» цвет, используемый со значением непрозрачности «0,6», и этот исходный серый цвет также используется в следующем абзаце в качестве цвета фона. «Желтый» цвет имеет непрозрачность «0,7», а «вишнево-вишневый» — «0,8». Оба исходных цвета также отображаются в цветах фона абзаца.

Это руководство предназначено для вас, чтобы вы могли изучить концепцию непрозрачности цвета фона в CSS.