如何在Astra主题中为Gutenberg文本添加CSS斜向绿色背景框

不用Cover组件，换用段落/标题块来实现，通过伪元素做跟随文本的斜向背景，完全不会裁切内容，步骤如下：

• 在Gutenberg编辑器里，插入段落或标题块，输入目标文本
• 选中这个块，在右侧面板的「高级」选项中，添加额外CSS类：slant-bg
• 打开Astra主题的「自定义」→「额外CSS」，粘贴以下代码：

.slant-bg {
  position: relative;
  display: inline-block; /* 让背景宽度自动匹配文本长度 */
  padding: 0.4em 1.3em; /* 控制文本和背景边框的间距，可按需调整 */
  z-index: 1; /* 确保文本在背景上方 */
}

.slant-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #27ae60; /* 替换成你需要的绿色，可对齐演示站样式 */
  clip-path: polygon(22% 0%, 100% 0%, 78% 100%, 0% 100%); /* 调整数值可改变斜角幅度 */
  z-index: -1; /* 把背景层放在文本后面 */
}

之前方法的问题原因 #

Cover组件是宽幅块级元素，clip-path会裁切整个容器的所有内容，包括内部文本。而上面的方法中，背景通过伪元素生成在文本块下层，文本本身不受裁切影响，同时inline-block让背景自动跟随文本宽度，完美匹配需求。

后续要复用这个样式，只要给其他文本块加上slant-bg类即可。

内容的提问来源于stack exchange，提问作者DarkLite1