mirror of
https://github.com/Textualize/textual.git
synced 2025-10-17 02:38:12 +03:00
d5d24235fa
This refactoring allows the _same_ paragraph(s) about the syntax of a color in Textual CSS to be reused throughout the docs, preventing us from repeating ourselves and allowing us to be more consistent.
86 lines
1.8 KiB
Markdown
86 lines
1.8 KiB
Markdown
# Background
|
|
|
|
The `background` rule sets the background color of a widget with an optional transparency level.
|
|
|
|
## Syntax
|
|
|
|
```
|
|
background: <COLOR> [<PERCENTAGE>];
|
|
```
|
|
|
|
--8<-- "docs/styles/snippets/color_css_syntax.md"
|
|
|
|
## 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)
|
|
```
|