• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как создать прозрачность элементов на CSS (Как сделать блочный элемент полупрозрачным с помощью CSS)
Как создать прозрачность элементов на CSS
Kosten
Дата: Понедельник, 2020-02-03, 23:22 | Сообщение 1
Оффлайн
Администраторы
Сообщений:26707
Награды: 61


По определению непрозрачность и прозрачность элементов в 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 или другое программное обеспечение для редактирования фотографий.
Прикрепления: 9248269.png(121.1 Kb) · 2438797.png(16.8 Kb) · 7221711.png(25.9 Kb) · 6205857.jpg(16.6 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Как создать прозрачность элементов на CSS (Как сделать блочный элемент полупрозрачным с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск: