Css border прозрачность: html — Прозрачная обводка (border)

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

<стиль> дел { высота: 100 пикселей; ширина: 200 пикселей; граница: 1px сплошной черный; } .нижний { цвет фона: золото; z-индекс: 1; } .Топ { положение: родственник; верх: -65px; слева: 50 пикселей; цвет фона: салатовый; z-индекс: 2; непрозрачность: 0,4; } <дел> <дел>

Свойство CSS opacity было введено в CSS3, чтобы позволить разработчикам включать прозрачность в элементах HTML.

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

Синтаксис

непрозрачность: <значение>

Возможные значения

Возможные значения:

<альфа-значение>

Задает степень прозрачности, которую следует применить к элементу. Значение 0,0 указывает на полную прозрачность, а значение 1,0 указывает на полную непрозрачность (отсутствие прозрачности).

Кроме того, все свойства CSS также принимают следующие значения ключевых слов CSS в качестве единственного компонента значения их свойства:

начальный

Представляет значение, указанное как начальное значение свойства.

унаследовать

Представляет вычисленное значение свойства родительского элемента.

снято с охраны

Это значение действует как inherit или initial , в зависимости от того, унаследовано свойство или нет. Другими словами, он устанавливает для всех свойств их родительские значения, если они наследуемые, или их начальные значения, если они не наследуемые.

Основная информация о свойствах

Исходное значение

1

Применимо к

Все элементы

Унаследовано?

№

СМИ

Визуальный

Анимируемый

Да (см. пример)

Пример кода

Базовый CSS

непрозрачность: 0,4;

Рабочий пример в документе HTML

<стиль> дел { высота: 100 пикселей; ширина: 200 пикселей; граница: 1px сплошной черный; } .нижний { цвет фона: золото; z-индекс: 1; } .Топ { положение: родственник; верх: -65px; слева: 50 пикселей; цвет фона: салатовый; z-индекс: 2; непрозрачность: 0,4; } <дел> <дел>

Попробуй

Спецификации CSS

• Свойство opacity определено в модуле цвета CSS уровня 3 (рекомендация W3C от 7 июня 2011 г.).

Поддержка браузера

В следующей таблице, предоставленной Caniuse.com, показан уровень поддержки этой функции браузерами.

Префиксы поставщиков

Для максимальной совместимости с браузерами многие веб-разработчики добавляют свойства, специфичные для браузера, с помощью таких расширений, как 9. 0005 -webkit- для Safari, Google Chrome и Opera (более новые версии), -ms- для Internet Explorer, -moz- для Firefox, -o- для более старых версий Opera и т.д. CSS свойство, если браузер не поддерживает проприетарное расширение, он просто проигнорирует его.

Эта практика не рекомендуется W3C, однако во многих случаях единственный способ протестировать свойство — включить расширение CSS, совместимое с вашим браузером.

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

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

Вы также можете использовать Autoprefixer с такими препроцессорами, как Less и Sass.

CSS: свойство непрозрачности

В этом руководстве по CSS объясняется, как использовать свойство CSS под названием непрозрачность с синтаксисом и примерами.

Описание

Свойство CSS opacity определяет прозрачность элемента.

Синтаксис

Синтаксис свойства CSS opacity:

 opacity: значение; 

Параметры или аргументы

значение

Уровень прозрачности элемента. Это может быть одно из следующих значений:

.

Значение	Описание
номер	Значение от 1,0 до 0,0. дел { непрозрачность: 0,5; }
унаследовать	Указывает, что элемент унаследует непрозрачность от своего родительского элемента div { opacity: inherit; }

Примечание

• Если свойство непрозрачности выражается в виде числа, оно может принимать значения от 1,0 до 0,0.
  • Значение 1.0 означает, что элемент полностью непрозрачен (и вы не можете видеть что-либо за элементом).
  • Значение 0.0 означает, что элемент полностью прозрачен (т.е. невидим).

Совместимость с браузерами

Свойство прозрачности CSS имеет базовую поддержку в следующих браузерах:

• Хром 1+
• Андроид 1+
• Firefox 1+ (Gecko 1.7+)
• Firefox Mobile 1.0+ (Gecko 1.7+)
• Internet Explorer 9+ (IE 9+)
• IE Телефон 9+
• Опера 9+
• Опера Мобайл 9+
• Safari 1.2 (веб-кит)
• Safari Mobile 3.2

Пример

Мы обсудим свойство opacity ниже, исследуя примеры использования этого свойства в CSS.

Непрозрачный

Давайте рассмотрим пример, в котором мы устанавливаем значение непрозрачности равным 1, что делает элемент непрозрачным.

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

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

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

 

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

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

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

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

полностью сплошной без какой-либо степени прозрачности.

Translucent

Теперь давайте возьмем тот же пример и применим уровень прозрачности к тегу

, чтобы сделать его полупрозрачным.

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

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

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

 

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

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

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

значение 0,5, что делает элемент

полупрозрачным.