CSS прозрачность – просто о важном
О том, что такое CSS, знают практически все, кто тем или иным образом причастен к созданию сайтов. Термин « CSS прозрачность » (или css opacity ) тоже на слуху. Чаще всего эта методика используется для решения дизайнерских задач (посредством верстки), улучшения юзабилити ресурса.
Что можно сделать при помощи данной технологии?
Используя прозрачность CSS, можно варьировать степень прозрачности как страницы в целом, так и отдельных ее частей:
Как задается прозрачность CSS: формальности
За техническую сторону создания этого эффекта отвечает CSS свойство opacity (примечательно, что в переводе на русский язык это слово и означает « прозрачность »).
Данное свойство характеризуется следующими признаками:
- значение задается в цифровом выражении (от 0 до 10; чем больше число – тем меньшей будет прозрачность объекта);
- применяется ко всем элементам, имеющимся на странице (то есть можно задать при помощи CSS прозрачность блока или текста);
- не наследуется.
Планируя использовать этот эффект, надо знать, как он поддерживается в разных браузерах:
Техническая сторона вопроса: задаем прозрачность фона
Одним из самых важных в верстке (и поэтому распространенных) является вопрос о том, как задать прозрачность фона в CSS. Ничего сложного здесь нет.
Код элемента, с которым ведется работа, должен выглядеть следующим образом (в скобках указаны варианты, которые срабатывают в разных браузерах):
При этом надо помнить, что заданная элементу прозрачность впоследствии наследуется дочерними элементами. То есть, если внутри фона есть картинка, текст или что-то еще – оно автоматически изменит степень прозрачности. Это не всегда допустимо.
Поэтому следует знать о таком варианте работы с прозрачностью (возьмем в качестве примера ситуацию, когда блок меню на прозрачном фоне должен быть непрозрачным).
Видоизменяем код на такой:
Задача решена. Такой метод можно использовать в тех случаях, когда нужно сделать непрозрачными те элементы, которые находятся внутри кода.
Техническая сторона вопроса: задаем прозрачность блока
Если прозрачность фона уже задана, то прозрачность блока, расположенного внутри него, в CSS задается автоматически. Об этом говорилось выше.
Если же нужно, чтобы дочерний блок не наследовал прозрачность родительского – все обстоит сложнее! Решить данный вопрос можно следующим образом:
Сущность данного метода состоит в том, что блок, который надо сделать непрозрачным, не является на самом деле дочерним. Поэтому его прозрачность будет независимой величиной.
Дополнение
Еще один важный вопрос прозрачность background в CSS. Иными словами, это создание полупрозрачного цветного фона. Его можно задать следующим образом:
Таким образом, в работе с прозрачностью в CSS все достаточно просто и логично.
Как сделать прозрачную форму
Лучший отвечающий
Вопрос
Доброго времени суток!
Столкнулся с необходимостью сделать полупрозрачную форму с непрозрачными контролами на ней. В частности интересует вывод текста на полупрозрачную форму.
Необходима возможность регулировать степень прозрачности динамически во время работы приложения.
Есть возможность изменять прозрачность при помощи Form.Opacity — но в этом случае все размещенные контролы также следуют установленному значению. Пробовал рисовать на форме — ну как и ожидалось — результат тот же, что и c размещенными контролами.
Нарыл в инете вариант с:
Form.BackColor = Color.White;
Form.TransparencyKey = Color.White;
public class opacityLabel : Label <
protected override void OnPaint(PaintEventArgs e) <
if (e != null) <
e.Graphics.TextRenderingHint = System.Drawing.Text.TextRenderingHint.SingleBitPerPixelGridFit;
e.Graphics.DrawString(Text, Font, new SolidBrush(ForeColor), ClientRectangle);
>
else
base.OnPaint(e);
>
Но решение не совсем хорошее, т.к. форма становится полностью прозрачной.
В общем я в тупике. пните меня в нужное русло/направление для поиска в моей тупиковой ситуации.
PS: Можно ли делать градиентную прозрачность формы, например, используя в качестве шаблона картинку PNG?
Form. Opacity Свойство
Некоторые сведения относятся к предварительной версии продукта, в которую до выпуска могут быть внесены существенные изменения. Майкрософт не предоставляет никаких гарантий, явных или подразумеваемых, относительно приведенных здесь сведений.
Возвращает или задает уровень непрозрачности формы.
Значение свойства
Уровень непрозрачности для формы. Значение по умолчанию — 1,00.
Примеры
В следующем примере показано, как создать форму, отображаемую с уровнем непрозрачности 75 процентов. Он создает новую форму, расположенную в центре экрана со свойством Opacity , установленным для изменения уровня непрозрачности формы. В примере также задается Size свойство для предоставления формы большего размера, чем размер формы по умолчанию.
В этом примере предполагается, что CreateMyOpaqueForm метод вызывается из другой формы в обработчике событий или другом методе.
Комментарии
Свойство Opacity позволяет указать уровень прозрачности для формы и ее элементов управления. Если для этого свойства задано значение менее 100 процентов (1,00), вся форма, включая границы, становится более прозрачной. Если для этого свойства задано значение 0 % (0,00), форма невидима. Это свойство можно использовать для предоставления различных уровней прозрачности или для предоставления эффектов, таких как поэтапное отображение формы или вне представления. Например, можно фазировать форму в представлении, установив Opacity для свойства значение 0 % (0,00) и постепенно увеличивая значение, пока не достигнет 100 процентов (1,00).
Opacity отличается от прозрачности, предоставляемой TransparencyKey, что делает форму и ее элементы управления полностью прозрачными, если они совпадают с цветом, указанным в свойстве TransparencyKey .
Это свойство не поддерживается в том true случаеRightToLeftLayout.
Свойство Opacity зависит от API многоуровневого Windows. Дополнительные сведения см. в разделе многоуровневые Windows.