mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
97 lines
2.2 KiB
Markdown
97 lines
2.2 KiB
Markdown
# Background
|
|
|
|
The `background` rule sets the background color of a widget.
|
|
|
|
## Syntax
|
|
|
|
--8<-- "docs/snippets/syntax_block_start.md"
|
|
background: <a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>];
|
|
--8<-- "docs/snippets/syntax_block_end.md"
|
|
|
|
The style `background` needs a [`<color>`](../../css_types/color) followed by an optional [`<percentage>`](../../css_types/percentage) to specify the color transparency.
|
|
|
|
### Values
|
|
|
|
#### <color>
|
|
|
|
--8<-- "docs/snippets/type_syntax/color.md"
|
|
|
|
#### <percentage>
|
|
|
|
--8<-- "docs/snippets/type_syntax/percentage.md"
|
|
This is clamped between `0%` and `100%`.
|
|
|
|
## Examples
|
|
|
|
This example creates three widgets and applies a different background to each.
|
|
|
|
=== "background.py"
|
|
|
|
```python
|
|
--8<-- "docs/examples/styles/background.py"
|
|
```
|
|
|
|
=== "background.css"
|
|
|
|
```sass
|
|
--8<-- "docs/examples/styles/background.css"
|
|
```
|
|
|
|
=== "Output"
|
|
|
|
```{.textual path="docs/examples/styles/background.py"}
|
|
```
|
|
|
|
The next example creates ten widgets layed out side by side to show the effect of setting different percentages for the transparency of the background color.
|
|
|
|
=== "background_transparency.py"
|
|
|
|
```python
|
|
--8<-- "docs/examples/styles/background_transparency.py"
|
|
```
|
|
|
|
=== "background_transparency.css"
|
|
|
|
```sass
|
|
--8<-- "docs/examples/styles/background_transparency.css"
|
|
```
|
|
|
|
=== "Output"
|
|
|
|
```{.textual path="docs/examples/styles/background_transparency.py"}
|
|
```
|
|
|
|
## CSS
|
|
|
|
```sass
|
|
/* Blue background */
|
|
background: blue;
|
|
|
|
/* 20% red background */
|
|
background: red 20%;
|
|
|
|
/* RGB color */
|
|
background: rgb(100,120,200);
|
|
|
|
/* HSL color */
|
|
background: hsl(290,70%,80%);
|
|
```
|
|
|
|
## Python
|
|
|
|
You can use the same syntax as CSS, or explicitly set a `Color` object for finer-grained control.
|
|
|
|
```python
|
|
# Set blue background
|
|
widget.styles.background = "blue"
|
|
# Set through HSL model
|
|
widget.styles.background = "hsl(351,32%,89%)"
|
|
|
|
from textual.color import Color
|
|
# Set with a color object by parsing a string
|
|
widget.styles.background = Color.parse("pink")
|
|
widget.styles.background = Color.parse("#FF00FF")
|
|
# Set with a color object instantiated directly
|
|
widget.styles.background = Color(120, 60, 100)
|
|
```
|