| Kosten | Понедельник, 03 Февраля 2020 | Сообщение 1 |
| По определению непрозрачность и прозрачность элементов в CSS определяют, это насколько видим сам основной элемент, будь то в изображениях, таблицах или даже цветовых значениях RGBA, как красный, зеленый, синий и другие оттенки. Основываясь на корневых словах, то непрозрачность является мерой непрозрачности или плотности элемента.
Где в то время как прозрачность, это мера того, насколько легко вы можете видеть сквозь него то, что существует в слое под ним. В любом случае, они работают одинаково, где 100% непрозрачность означает, что элемент полностью видим, а 100% прозрачность означает, что он полностью невидим.
Вместо того чтобы использовать дорогостоящее программное обеспечение для создания этих эффектов, вы можете использовать CSS. С помощью нескольких простых нажатий клавиш вы можете мгновенно изменить то, как элемент на вашей странице выглядит, или в некоторых случаях, даже то, как он реагирует, когда указатель мыши находится над ним.
Непрозрачные и прозрачные изображения
При изменении изображения свойство непрозрачности принимает значения от 0,0 до 1,0, причем последнее используется по умолчанию. Таким образом, чем ниже значение, тем более прозрачным становится изображение.
В приведенных ниже примерах мы использовали 0,2, 0,5 и 1,0 для параллельного сравнения:
CSS
Код img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
Примечание: Мы использовали свойство фильтра, поскольку версии Internet Explorer 8 и ниже еще не распознают свойство непрозрачности.
Прозрачные коробки
Вы можете использовать свойство opacity, чтобы добавить прозрачность элементу, включая фон и все его дочерние элементы. Например, в полях ниже, где с использованием div, а не table и его подэлементов весь текст также становится прозрачным.
Видите, как непрозрачность текста также исчезает, если это именно то, что вы хотите, нет необходимости изменять что-либо еще, так как можете использовать код ниже для достижения этого эффекта.
CSS
Код div {
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
}
Все самостоятельно ставим по обзору на прозрачность.
Прозрачность с использованием RGBA
Если вы хотите, чтобы изменялся только фон, а текст или другие дочерние элементы оставались бы непрозрачными, есть способ обойти это с помощью RGBA. Если вы привыкли к шестнадцатеричным кодам, вы можете узнать о других способах определения цветов в CSS, а именно о предопределенных цветах, RGB / RGBA и HSL / HSLA.
Значение RGBA обозначает красный зеленый синий альфа, а параметр альфа определяет непрозрачность цвета RGB. Итак, используя значения цвета RGBA, мы можем установить непрозрачность для фона, пока текст остается черным.
В приведенном выше примере мы использовали значение RGB 171, 205, 239, а затем параметр альфа определяет, насколько он непрозрачный или прозрачный.
Например:
CSS
Код div {
background: rgba(171, 205, 239, 0.3) /* Blue background with 30% opacity */
}
На этом все, где переходим к другой вариации.
Непрозрачный текст в прозрачной коробке
Еще одна очень крутая вещь, которую вы можете сделать с непрозрачностью и прозрачностью, это добавить текст в прозрачную рамку, возможно, чтобы сместить очень резкое или темное фоновое изображение, как в нашем примере ниже.
Чтобы создать этот простой, но эффективный стиль, то задействуем элемент div и назовите их классы как «background» и «transbox». Первый класс, это фоновое изображение и рамка, а второй класс - это отдельный цвет фона и рамка.
Сначала мы создаем элемент div (class ="background") с фоновым изображением и рамкой. Затем мы создаем еще один div и class = "transbox" внутри первого div. Элемент div имеет цвет фона и границу, так как div прозрачен. Внутри прозрачного div мы добавляем текст внутри элемента p, который отвечает за отступы, чтоб описание корректно смотрелось.
Вот код, что мы использовали, который вы можете изменить и поэкспериментировать с использованием вашего собственного изображения и текста.
Код <html> <head> <style> div.background { background: url(Ссылка на изображение) repeat; border: 2px solid black; } div.transbox { margin: 30px; background-color: #ffffff; border: 1px solid black; opacity: 0.6; filter: alpha(opacity=60); } div.transbox p { margin: 5%; font-weight: bold; font-family: Verdana; font-size: 12px; color: #000000; } </style> </head> <body> <div> <div> <p>Это образец текста, помещенный в прозрачную коробку.</p> </div> </div> </body> </html>
Существует много возможных применений для непрозрачности и прозрачности, будь то чисто эстетический или для выделения, уменьшения акцента элементов на вашей веб-странице. Это безусловно более простоя и удобная альтернатива, чем полагаться на Photoshop или другое программное обеспечение для редактирования фотографий.
| | Страна: (RU) |
| |
