mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
196d430582
Textual CSS is better highlighted in SASS code blocks because the SASS parser seems to be more lenient.
53 lines
1.3 KiB
Markdown
53 lines
1.3 KiB
Markdown
# Opacity
|
|
|
|
The `opacity` property sets the opacity/transparency of a widget.
|
|
|
|
## Syntax
|
|
|
|
--8<-- "docs/snippets/syntax_block_start.md"
|
|
opacity: <a href="../../css_types/number"><number></a> | <a href="../../css_types/percentage"><percentage></a>;
|
|
--8<-- "docs/snippets/syntax_block_end.md"
|
|
|
|
The opacity of a widget can be set as a [`<number>`](../css_types/number.md) or a [`<percentage>`](../css_types/percentage.md).
|
|
`0`/`0%` means no opacity, which is equivalent to full transparency.
|
|
Conversely, `1`/`100%` means full opacity, which is equivalent to no transparency.
|
|
Values outside of these ranges will be clamped.
|
|
|
|
## Example
|
|
|
|
This example shows, from top to bottom, increasing opacity values for a label with a border and some text.
|
|
When the opacity is zero, all we see is the (black) background.
|
|
|
|
=== "opacity.py"
|
|
|
|
```python
|
|
--8<-- "docs/examples/styles/opacity.py"
|
|
```
|
|
|
|
=== "opacity.css"
|
|
|
|
```sass
|
|
--8<-- "docs/examples/styles/opacity.css"
|
|
```
|
|
|
|
=== "Output"
|
|
|
|
```{.textual path="docs/examples/styles/opacity.py"}
|
|
```
|
|
|
|
## CSS
|
|
|
|
```sass
|
|
/* Fade the widget to 50% against its parent's background */
|
|
Widget {
|
|
opacity: 50%;
|
|
}
|
|
```
|
|
|
|
## Python
|
|
|
|
```python
|
|
# Fade the widget to 50% against its parent's background
|
|
widget.styles.opacity = "50%"
|
|
```
|