mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
54 lines
1.4 KiB
Markdown
54 lines
1.4 KiB
Markdown
# Text-opacity
|
|
|
|
The `text-opacity` style blends the color of the content of a widget with the color of the background.
|
|
|
|
## Syntax
|
|
|
|
--8<-- "docs/snippets/syntax_block_start.md"
|
|
text-opacity: <a href="../../css_types/number"><number></a> | <a href="../../css_types/percentage"><percentage></a>;
|
|
--8<-- "docs/snippets/syntax_block_end.md"
|
|
|
|
The text opacity 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 `text-opacity` values.
|
|
|
|
=== "Output"
|
|
|
|
```{.textual path="docs/examples/styles/text_opacity.py"}
|
|
```
|
|
|
|
=== "text_opacity.py"
|
|
|
|
```python
|
|
--8<-- "docs/examples/styles/text_opacity.py"
|
|
```
|
|
|
|
=== "text_opacity.css"
|
|
|
|
```sass hl_lines="2 6 10 14 18"
|
|
--8<-- "docs/examples/styles/text_opacity.css"
|
|
```
|
|
|
|
## CSS
|
|
|
|
```sass
|
|
/* Set the text to be "half-faded" against the background of the widget */
|
|
text-opacity: 50%;
|
|
```
|
|
|
|
## Python
|
|
|
|
```python
|
|
# Set the text to be "half-faded" against the background of the widget
|
|
widget.styles.text_opacity = "50%"
|
|
```
|
|
|
|
## See also
|
|
|
|
- [`opacity`](./opacity.md) to specify the transparency of a whole widget.
|