Add opacity docs

docs/examples/styles/opacity.css

@@ -0,0 +1,30 @@
+#zero-opacity {
+    opacity: 0%;
+}
+
+#quarter-opacity {
+    opacity: 25%;
+}
+
+#half-opacity {
+    opacity: 50%;
+}
+
+#three-quarter-opacity {
+    opacity: 75%;
+}
+
+#full-opacity {
+    opacity: 100%;
+}
+
+Screen {
+    background: antiquewhite;
+}
+
+Static {
+    height: 1fr;
+    background: lightseagreen;
+    content-align: center middle;
+    text-style: bold;
+}

docs/examples/styles/opacity.py

@@ -0,0 +1,14 @@
+from textual.app import App
+from textual.widgets import Static
+
+
+class OpacityApp(App):
+    def compose(self):
+        yield Static("opacity: 0%", id="zero-opacity")
+        yield Static("opacity: 25%", id="quarter-opacity")
+        yield Static("opacity: 50%", id="half-opacity")
+        yield Static("opacity: 75%", id="three-quarter-opacity")
+        yield Static("opacity: 100%", id="full-opacity")
+
+
+app = OpacityApp(css_path="opacity.css")

docs/styles/opacity.md

@@ -0,0 +1,54 @@
+# 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%"
+```

docs/styles/text_opacity.md

@@ -1,6 +1,6 @@
 # Text-opacity
 
-The `text-opacity` blends the color of the text in a widget with the color of the background.
+The `text-opacity` blends the color of the content of a widget with the color of the background.
 
 ## Syntax