Textual 样式指南全面掌握 background 背景色样式【免费下载链接】textualThe lean application framework for Python. Build sophisticated user interfaces with a simple Python API. Run your apps in the terminal and a web browser.项目地址: https://gitcode.com/gh_mirrors/te/textualbackground是 Textual 中最常用的 CSS 样式之一用于设置组件Widget的背景颜色。本文将围绕 docs/styles/background.md 展开完整讲解其语法、颜色取值、透明度控制、Python 侧动态设置并结合源码剖析其底层实现原理帮助你彻底掌握背景色的正确用法。语法background: color [percentage];background样式必须提供一个color值颜色之后可选地跟一个percentage来指定该颜色的不透明度opacity。该百分比会被钳制clamp在0%到100%之间超出该范围的值会被自动修正为边界值。0%表示完全透明等效于不设置背景100%表示完全不透明即纯色背景介于两者之间的值会让背景呈半透明效果透出其下层的内容或屏幕背景色。颜色取值详解color支持 Textual 完整颜色系统中的全部格式具体定义见 docs/css_types/color.md。常用的写法包括格式示例说明命名颜色named colorred、pinkTextual 内置大量可识别的颜色名完整清单可查阅 docs/css_types/name.md十六进制 RGB#F35573、#A2F3 位或 6 位十六进制3 位格式每一位会被复制#A2F等价于#AA22FF十六进制 RGBA#F35573A0、#F35A4 位或 8 位末尾追加不透明度通道RGB 描述rgb(100, 120, 200)三个通道取值 0255RGBA 描述rgba(100, 120, 200, 0.5)额外追加 01 之间的不透明度HSL 描述hsl(290, 70%, 80%)色相 0360饱和度与明度取百分比HSLA 描述hsla(290, 70%, 80%, 0.5)HSL 加上 01 的不透明度主题变量$accent、$primaryTextual 默认主题提供的 CSS 变量可直接作为背景色使用需要注意的是background属性与用于设置文字颜色的color样式是两个不同的东西二者不要混淆详见下文“相关样式”一节。基础用法示例下面这个例子创建了三个Label组件并为每个组件设置不同的背景色演示命名颜色、RGB 与 HSL 三种典型写法。 Outputtext 运行 docs/examples/styles/background.py 可见三个分别呈现红、绿、蓝背景的标签 background.pypython from textual.app import App from textual.widgets import Label class BackgroundApp(App): CSS_PATH background.tcss def compose(self): yield Label(Widget 1, idstatic1) yield Label(Widget 2, idstatic2) yield Label(Widget 3, idstatic3) if __name__ __main__: app BackgroundApp() app.run() background.tcsscss Label { width: 100%; height: 1fr; content-align: center middle; color: white; } #static1 { background: red; } #static2 { background: rgb(0, 255, 0); } #static3 { background: hsl(240, 100%, 50%); } 完整源码见 docs/examples/styles/background.py 与 docs/examples/styles/background.tcss。运行方式很简单将两个文件放在同一目录然后执行python background.py即可在终端中看到效果。不同透明度设置在background后追加一个百分比值即可控制背景色的不透明度。下面的示例创建了十个并排的Static组件背景统一使用红色但透明度从10%依次递增到100%直观展示百分比对视觉效果的连续影响。 Outputtext 运行 docs/examples/styles/background_transparency.py 可见十块并排的红色背景从左到右不透明度逐级升高 background_transparency.pypython from textual.app import App, ComposeResult from textual.widgets import Static class BackgroundTransparencyApp(App): Simple app to exemplify different transparency settings. CSS_PATH background_transparency.tcss def compose(self) - ComposeResult: yield Static(10%, idt10) yield Static(20%, idt20) yield Static(30%, idt30) yield Static(40%, idt40) yield Static(50%, idt50) yield Static(60%, idt60) yield Static(70%, idt70) yield Static(80%, idt80) yield Static(90%, idt90) yield Static(100%, idt100) if __name__ __main__: app BackgroundTransparencyApp() app.run() background_transparency.tcsscss #t10 { background: red 10%; } #t20 { background: red 20%; } #t30 { background: red 30%; } #t40 { background: red 40%; } #t50 { background: red 50%; } #t60 { background: red 60%; } #t70 { background: red 70%; } #t80 { background: red 80%; } #t90 { background: red 90%; } #t100 { background: red 100%; } Screen { layout: horizontal; } Static { height: 100%; width: 1fr; content-align: center middle; } 对应源码见 docs/examples/styles/background_transparency.py 与 docs/examples/styles/background_transparency.tcss。注意Screen被设置为layout: horizontal配合每个Static的width: 1fr实现十个色块的均分布局。在 Python 中动态设置背景色除了通过 CSS 文件声明你也可以在 Python 代码里通过widget.styles.background动态设置或修改背景色语法与 CSS 一致。除此之外还可以直接传入Color对象获得更细粒度的控制# 与 CSS 相同的字符串写法 widget.styles.background blue # 命名颜色 widget.styles.background hsl(351,32%,89%) # 通过 HSL 模型设置 from textual.color import Color # 传入由字符串解析出的 Color 对象 widget.styles.background Color.parse(pink) widget.styles.background Color.parse(#FF00FF) # 直接实例化 Color 对象红、绿、蓝通道 widget.styles.background Color(120, 60, 100)字符串写法同样支持“颜色 百分比不透明度”的组合例如widget.styles.background red 20% # 20% 不透明度的红色 widget.styles.background rgb(100, 120, 200) 50%动态设置背景色非常适合实现高亮、选中态、错误提示等交互反馈场景并且设置后 Textual 会自动触发组件刷新refresh(childrenTrue)无需手动重绘。源码视角background 是如何工作的默认值是透明黑色在 src/textual/css/styles.py 中background被声明为一个ColorProperty其默认值为Color(0, 0, 0, 0)——即 alpha 通道为 0 的完全透明黑色。这意味着未设置background的组件背景是透明的底层内容父组件或屏幕背景会透出来。ColorProperty 的字符串解析当通过字符串设置背景色时ColorProperty.__set__会执行以下流程将字符串按空白拆分成若干 token以%结尾的 token 会被percentage_string_to_float解析为 alpha不透明度值其余 token 交给Color.parse解析成颜色支持#RGB、#RRGGBB、rgb()、hsl()等全部格式详见 src/textual/color.py最终通过multiply_alpha(alpha)把解析出的颜色乘以该不透明度得到最终背景色若解析失败会抛出StyleValueError并附带便于排查的提示信息。因此background: red 20%在底层等价于把红色的 alpha 通道设置为 0.2而100%对应 alpha 为 1.0完全不透明。渲染合成中的角色背景色最终会进入 Textual 的渲染管线在 src/textual/style.py 的Style数据类中background: Color | None是其中的一个字段当组件渲染时背景色与前景色会一起被转换为 Rich 样式bgcolor...、color...参与最终的终端输出见 src/textual/style.py。在 src/textual/css/styles.py 中可以看到只有当background规则存在且其 alpha 大于 0 时背景色才会被实际应用到合成输出中——这也印证了“透明背景不参与绘制”的设计。此外半透明的背景在多层组件叠加时会依据 alpha 值与下层颜色进行混合从而产生视觉上的透色效果。相关样式background-tint将一个颜色与背景色进行混合blend着色常用于在不覆盖内容的情况下为组件整体添加色调例如悬停高亮。color设置组件中文字的颜色与background分别控制前景与背景二者常配合使用以保证可读性。text-opacity控制组件内内容的透明度相对背景而言可与背景透明度组合出丰富的层次。opacity控制整个组件的整体透明度。scrollbar-background滚动条轨道的背景色与组件背景相互独立。小结background是 Textual 中实现界面视觉层次的基础样式用一个color指定颜色用可选的percentage精确控制不透明度且两种写法CSS 与 Pythonwidget.styles.background完全等价。理解其默认透明行为与百分比钳制规则再结合background-tint、color等相关样式即可构建出富有层次感的终端界面。【免费下载链接】textualThe lean application framework for Python. Build sophisticated user interfaces with a simple Python API. Run your apps in the terminal and a web browser.项目地址: https://gitcode.com/gh_mirrors/te/textual创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考