如何在 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>

例如：

我就是這樣搞定的！

判決書

為圖像添加覆蓋確實可以幫助您裝飾帖子/頁面並給訪問者留下更好的印象。值得深入研究如何製作完美的疊加層，因此我強烈建議您立即開始工作。您還可以使用滑塊、彈出橫幅、視頻背景等使您的網站更具吸引力……我希望我的說明對您來說足夠清楚，如果有任何問題和意見，請隨時在下面留下問題和評論。再見！