将文本以固定高度放置在图像上

Question

我是 WordPress 的新手，正在使用 Astra 主题和标准的 Gutenberg 生成器。如果能够像 website 那样将文本放置在图像上，那就太好了：

绿色方形图像应放在文本后面：

使用标准的Cover 块，它会将图像的高度缩放得过大，请参见第二张图片。使用Media and text 块时，文本不能放在图像上。

我尝试使用 Astra 的 Spectra 插件来完成此操作，但似乎找不到方法。另一个想法是为 Column 设置固定高度并将 Cover 放在那里。但是对象Column 只有Minimal height 而没有Fixed height。

任何帮助将不胜感激。

Answer 1

通过向段落在 Cover 块中，您可以在 CSS 中使用 clip-path 绘制所需的形状以适合文本内容；不需要背景图片，例如：

style.css / 编辑器-style.css

.green-background {
    position:relative;
    width: fit-content; /* to only cover the text */
    float: left; /* default is centered in the Cover block */
    z-index:0;
}
.green-background::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    clip-path: polygon(10% 0%, 100% 0, 90% 100%, 0% 100%); /* background rectangle shape */
    background-color:rgb(115,213, 54); /* green color */
    z-index:-1;
}

带有背景图像的封面块示例，带有附加 CSS green-background 的颜色叠加仅应用于段落：

注意。此方法的注意事项是段落块仍然可以覆盖/应用它自己的文本和背景颜色：如果选择段落背景颜色，它将出现在绿色背景形状的顶部。如果这是一个问题，您可以采取其他步骤，例如扩展 Cover 块以删除该选项。