如何在 WordPress 中叠加图像

已发表: 2021-07-15

如果您热衷于使您的网站出类拔萃，那么您将始终竭尽全力美化它。有数百万种方法可以让您的网站成为缪斯女神，我们今天的帖子中将提到其中一种方法：叠加图像。

目录隐藏

1.什么是叠加？
2.如何在 WordPress 中叠加图像
1. 2.1. 方法一：使用古腾堡的盖板
2. 2.2. 方法 2：使用 CSS
3.判决

仍然想知道它是什么？慢慢来，让我们带你出去！

什么是叠加？

如您所见，我使用了带有文本和叠加层的图像作为标题；这与编写简单的文本标题有很大的不同。与普通的相比，它看起来更时尚、更有吸引力，对吧？

更重要的是，图像上的叠加有助于突出显示文本，同时保持背景图片可见。您可以轻松地在帖子/页面上添加带有文本和叠加的图像，并将其用于不同的目的。在这篇文章中，我们将向您展示如何通过简单的步骤来完成。

心动了吗？让我们开始吧！

如何在 WordPress 中叠加图像

有两种方法可以尝试在 WordPress 中覆盖图像：使用 Gutenberg 的封面块和使用 CSS。虽然使用 Gutenberg 可以帮助您构建一个帖子/页面，即使是从一张空的工作表中也可以包含带有叠加层的图像，但使用 CSS 将帮助您在预先构建的帖子/页面上快速自定义图像。

这两种方法在某些方面都很容易使用，我们将一一向您展示如何使用它们。

方法一：使用古腾堡的盖板

转到古腾堡的页面编辑器。

步骤 1：使用封面块插入图像。

单击添加块并选择块类型为Cover 。

接下来，选择要在该封面块上显示的背景图片。您可以上传图像或从库中选择图像。

如果需要，您还可以将之前添加的图像更改为封面图像。单击图像，选择Change block style or type ，然后选择Cover ：

在我的例子中，我会选择这个豆豆作为背景，并在上面写一些随机的文字。

此外，我可以在下面的设置中设置图像的宽度。我只会将其居中对齐。

现在我的封面已经准备好了背景图片和文字。默认情况下，Cover 块已经有一个黑色覆盖，所以我们将在下一部分中看到如何编辑它：

第 2 步：自定义覆盖块覆盖

接下来，您将继续进行块设置以进行叠加。

单击块 > 单击选项按钮（显示为三点按钮）> 选择显示更多设置。

现在应该在屏幕右侧准备好块设置菜单。转到叠加部分。

它为您提供了两种颜色选项，即纯色和渐变色来覆盖您的封面图像：

我们将尝试这两种选择。首先，让我们尝试纯色叠加。

纯色叠加

现在你可以：

从建议的菜单中选择一种颜色；
选择自定义颜色。您可以在调色板中选择一种颜色或插入颜色代码。自定义颜色显示如下。

我刚刚为我的覆盖选择了一种甜美的粉红色。此外，我还可以更改叠加层的不透明度（透明度级别）：

30% 到 60% 的不透明度是一个合适的值。如果您将不透明度设置为低于或高于建议的比率，则叠加层可能几乎不可见或太粗而无法看到背景。我将默认不透明度保持在 50%。

一切都在这里设置了！这就是您可以简单地向封面图像添加纯色叠加层的方法。

现在让我们转到渐变颜色选项。

渐变颜色叠加

如上所述，渐变色是至少两种选定颜色的方案。或者简单地说，叠加层的颜色会分别从第一个选择的颜色逐渐变化到第二个（依此类推）。

让我们看看我如何制作渐变叠加以更好地理解它。

首先，我将颜色模式从纯色更改为渐变色。另外，我从建议菜单中选择了一个渐变色集。这是它的外观：

如您所见，叠加层由 3 个控制点组成。每个都有一个纯色，您可以移动这些控制点来调整叠加的配色方案。

选择渐变色时的默认颜色排列是平衡的。我会试着稍微调整一下，这就是它的变化：

您可以进行的另一个调整是配色方案的类型。您可以选择线性和径向类型。对于线性类型，您还可以选择叠加的方向。

要掌握渐变颜色选项，您将需要更好的艺术感，并学习如何混合和匹配颜色以制作最佳叠加组合。

方法 2：使用 CSS

如果要使用经典编辑器向图像添加叠加层，则需要使用 CSS。您需要添加一些 CSS。转到外观 > 自定义 > 附加 CSS 。

对于渐变叠加

为渐变叠加添加此代码：

 .background-gradient {
    位置：相对；
}
.background-gradient::before {
    内容： '';
    背景：线性渐变（135deg，#0693e3，#9b51e0）；
    位置：绝对；
    顶部：0；
    左：0；
    底部：0；
    右：0；
    z-索引：1；
    不透明度：0.5；
}

对于实体覆盖：

为实体叠加添加此代码：

 .背景不透明度{
    位置：相对；
}
.background-opacity:before {
    内容： '';
    位置：绝对；
    顶部：0；
    左：0；
    底部：0；
    右：0；
    z-索引：1；
    不透明度：0.5；
    背景色：#000；
}

注意：此代码将帮助您仅添加叠加层，而不是图像上的文本。

如果您想添加许多具有不同类型叠加的图像，您可以同时添加两者。要将叠加定义为纯色或渐变色，请转到文本编辑器并为要叠加的图像添加一个类：

实心： <div class="background-opacity"> … </div>
渐变： <div class="background-gradient is-style-default"> … </div>

例如：

我就是这样搞定的！

判决书

为图像添加覆盖确实可以帮助您装饰帖子/页面并给访问者留下更好的印象。值得深入研究如何制作完美的叠加层，因此我强烈建议您立即开始工作。您还可以使用滑块、弹出横幅、视频背景等使您的网站更具吸引力……我希望我的说明对您来说足够清楚，如果有任何问题和意见，请随时在下面留下问题和评论。再见！