Add opacity docs

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