mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
55 lines
948 B
Markdown
55 lines
948 B
Markdown
# Opacity
|
|
|
|
The `opacity` property can be used to make a widget partially or fully transparent.
|
|
|
|
|
|
## Syntax
|
|
|
|
```
|
|
opacity: <FRACTIONAL>;
|
|
```
|
|
|
|
### Values
|
|
|
|
As a fractional property, `opacity` can be set to either a float (between 0 and 1),
|
|
or a percentage, e.g. `45%`.
|
|
Float values will be clamped between 0 and 1.
|
|
Percentage values will be clamped between 0% and 100%.
|
|
|
|
## Example
|
|
|
|
This example shows, from top to bottom, increase opacity values.
|
|
|
|
=== "opacity.py"
|
|
|
|
```python
|
|
--8<-- "docs/examples/styles/opacity.py"
|
|
```
|
|
|
|
=== "opacity.css"
|
|
|
|
```scss
|
|
--8<-- "docs/examples/styles/opacity.css"
|
|
```
|
|
|
|
=== "Output"
|
|
|
|
```{.textual path="docs/examples/styles/opacity.py"}
|
|
```
|
|
|
|
## CSS
|
|
|
|
```sass
|
|
/* Set the text to be "half-faded" against the background of the widget */
|
|
Widget {
|
|
opacity: 50%;
|
|
}
|
|
```
|
|
|
|
## Python
|
|
|
|
```python
|
|
# Set the text to be "half-faded" against the background of the widget
|
|
widget.styles.opacity = "50%"
|
|
```
|