如何使用 CSS 重疊多個圖像

已發表: 2020-07-15

CSS 代表級聯樣式表。它是一種樣式表語言，以 HTML 等標記語言定義文檔的表示。級聯樣式表區分內容和其他視覺呈現，如顏色、佈局、字體和主題。這種區分增強了對內容的訪問並控制了演示的規範。 CSS 為所選網頁定義了一個通用主題，並且在整個網站中都可見。 CSS 文件的細節保持分開，以減少複雜的問題和冗餘的內容結構。

目錄隱藏

1. 使用 CSS 網格：

2. 負邊距浮動：

3. CSS grid 和 float 方法相結合：

使用網格的優點：

CSS 可用於重疊多個圖像，即將一個圖像放在另一個圖像的頂部。有三種方法可以做到這一點。讓我們一一來看看它們。

1. 使用 CSS 網格：

別針

CSS Grid 是最強大的二維 CSS 功能，可以處理行和列以及其中的內容。通過使用 CSS 規則，您可以同時使用父元素和子元素。 CSS 中的網格從根本上改變了您佈局網頁及其內容的方式。要使用網格，您應該了解網格容器、網格項、網格線和網格單元。它還包括其他術語，如網格軌道和網格區域。網格容器的子元素可以將它們自己定位，就好像它們似乎與其他元素重疊一樣。

您可以使用像素在網格中創建固定和靈活的軌道大小。指定一定數量的像素可以設置網格以適應所需的佈局。要指定靈活的網格軌跡，您可以以百分比的形式提及值。

CSS Grid 最重要的特性是它可以通過更改 z 索引來重疊圖像，而不會中斷常規文檔流。通過使用 CSS 網格，您可以使用所述元素的任何高度和寬度。此外，頂部圖像始終向下放置，與左下角對齊。圖像將與容器元素的左邊緣對齊。

它的 HTML 代碼：

</div>

</div></div>

如果圖像在外觀上具有裝飾性，您可以向元素添加 role="presentation" 屬性。使用此規範，圖像將不會呈現給屏幕的讀者。

現在我們必須指定考慮的網格中列的寬度。在這裡，有幾種方法可以做到，但我們將創建一個 12 列的網格，因為通常使用 12 列的網格。

為此，我們將在包含其他元素的父元素的 CSS 文件中指定以下內容：

.image-stack

{

顯示：網格；

網格模板列：重複（12、1fr）；

位置：相對；

}

Grid-template-columns 是一個特性，用於指定網格將具有的列數。而 1fr 指定瀏覽器計算可用空間量。當您在列和行中有間隙時，這些東西很有用。

位置：相對在這裡很重要。它使圖像的 z-index 能夠根據我們的要求和規范運行。一旦有了可用的功能網格，就必須查看圖像的寬度。要為圖像添加寬度，理想的規範是以百分比指定寬度。現在，您應該從與圖像相關的組件的總寬度開始。圖像的寬度為 844 像素，即為 100%。頂部圖像的寬度為 521 像素。在這裡，我們可以將 521px 除以 844px。現在，結果值必須乘以 100，大致等於 61.7%。

如果將 61.7% 向上舍入到 62%，您會看到一個介於 58% 和 66% 之間的值。因此，我們將佔據 66%。對於頂部的圖像，我們有以下進入 CSS 的代碼：

.image-stack__item—頂部

{

網格列：1/span 8；

網格行：1； // 它必須與第二張圖片在同一行

Padding-top: 20% // 這會將圖片向下放置並保持比例。

z-index：1； //這將圖像呈現在底部照片的頂部。

}

對於第二張圖像，我們將計算：

645 px/844 px，該值必須乘以 100，得到 76.4%。我們將把它四捨五入到 75%，這完全適合我們在 CSS 中的 12 列網格。

您必須確保底部圖像佔據九列並通過第 4^條網格線開始渲染。有了這個，圖像應該佔據網格的其餘部分。

底部圖片的CSS代碼如下：

.image-stack__item—底部

{

網格列：4

網格行：1； //這使圖像出現在同一行

}

使用 CSS 網格，每種類型的重疊都是可能的。重疊可以包括圖像上的圖像、圖像上的文本或什至文本上重疊的文本。它提供了您可以想像的盡可能多的可能性。最終代碼如下所示：

</div> <p>文字內容放在這裡。</p> </div>

2. 負邊距浮動：

別針

CSS 的 Float 屬性將網頁元素放在其容器的左側或右側。它允許文本和內聯元素包裹元素。即使浮動元素是頁面的一部分，它仍然會脫離正常流程。使用 float 屬性，元素向右或向左移動，以觸及其容器元素的邊框。

float 屬性使它周圍的元素浮動。此屬性呈現與印刷設計相似的元素和內容。這樣的概念稱為文本換行。這意味著，文本將自身包裹在元素周圍。在印刷設計中，組件可能是文本漂浮在它們周圍的圖像。忽略文本換行會使文本與圖像重疊，就好像圖像不存在一樣。您可以使用浮動來設計整個網頁或網站的佈局。它不僅限於將文本包裹在網頁元素周圍。

此處的代碼將支持所有瀏覽器，包括 Internet Explorer。此方法側重於從文檔中取出元素並使用浮點數呈現它們。這種編碼語法最好的部分是結構與前面提到的結構相似。對於圖像堆棧中的父元素，我們使用“clear”，因為我們浮動其子元素。在這裡，內容呈現在圖像下方。語法如下：

.image-stack::after

{

內容： ' ';

顯示：表格；

明確：兩者；

}

上面的代碼是用於放置在底部的圖像。因此，第二個圖像將高於該圖像。

現在，對於放置在頂部的圖像，以下是代碼：

.image-stack__item—頂部

{

向左飄浮;

寬度：66%；

右邊距：-100%；

上邊距：15%；

位置：相對；

z-index：1；

}

我們有一個負值的指定邊距，這很重要。負邊距在不同情況下表現不同。如果它們適用於頂部或底部，它們會以特定方式起作用。如果負邊距位於浮動元素的左側或右側，它們的行為會有所不同。

在這裡，我們在允許圖像重疊的浮動左側元素上應用了負右邊距。 -100% 是圖像容器的寬度。這個值放在左邊，讓底部的圖像在它下面呈現，就像它不在文檔對像模型中一樣。因此，最終代碼如下所示：

{

box-sizing：邊框框；

}

p {

字體大小：20px；

字體系列：無襯線；

顏色：#6439a9；

}

。容器 {

填充：100px 30px；

寬度：100%；

邊距：0 自動；

最大寬度：900px；

}

// 清除修復

.image-stack::after {

內容： ' ';

顯示：表格；

明確：兩者；

}

.image-stack__item–top {

向左飄浮;

寬度：66%；

右邊距：-100%；

填充頂部：15%； // 隨意的

位置：相對；

z-index：1；

}

.image-stack__item–底部

{

浮動：對；

寬度：75%；

}

圖像

{

寬度：100%；

}

3. CSS grid 和 float 方法相結合：

別針

此方法中的代碼支持在所有瀏覽器上工作。它還指定了在舊的和過時的特定瀏覽器上完美運行的代碼。在這裡，我們使用“@supports”功能，這是此方法的重要組成部分。它是檢查考慮中的瀏覽器是否支持“顯示：網格”值。在使用代碼的“@supports”功能之前，我們將使用支持 Internet Explorer 瀏覽器的代碼。

在“@supports”功能中，我們將寬度重置為 100%。現在，float 屬性沒有意義，這裡將 dth 設置為 100%。考慮添加IE瀏覽器支持anner。如果負 m，它們的行為方式不同。它不會影響正在使用的元素。因此，它的最終代碼如下所示：

<div class=”container”> <p>跨瀏覽器方法</p> <div class=”image-stack”> <div class=”image-stack__item image-stack__item–top”> <img src=”https: //firstimagesource.com/s.cdpn.io/110238/image1.jpeg” alt=””> </div> <div class=”image-stack__item image-stack__item–bottom”> <img src=”https:// /secondimagesource.com/s.cdpn.io/110238/secondImage.jpg” alt=””> </div> </div> <p>文字內容放在這裡。</p> </div>

使用網格的優點：

別針

減少編碼是使用 CSS 網格的本質優勢。您無需生成額外的 HTML 元素來作為網格的基礎，而是使用樣式表來創建網格。網格框架並不總是使用語義上合理的類名稱。因為 CSS 網格本質上是原生的，所以您不必在項目中包含大型庫來支持它。基於 CSS 的 Web 開發速度更快，因為學習語法很容易。此外，使用 CSS 進行原型設計既快速又有效。

隨著瀏覽器支持的增長，您幾乎可以在任何地方使用網格。網格教程隨處可見；從初學者到高級開發人員的每個人都可以使用它。網格允許跨不同上下文輕鬆實現網頁的用戶界面。您可以創建響應式、結構化的佈局，無需無休止的文本換行，並具有三列佈局。網格為網頁的設計提供了易於維護和靈活性。此外，您可以同時使用行和列來生成複雜而靈活的計劃。由於大多數瀏覽器都支持網格系統，因此您不需要後備代碼即可使其工作。

網格使設計師能夠生成具有創意且令人驚嘆的網站佈局。此外，設計師可以選擇將其轉變為響應式設計，而不會影響設計的整體外觀和視覺美感。 CSS 結合了網格和設計師的設計理念，生成了一個開箱即用的設計。這種設計在外觀上既令人驚嘆，又能滿足當今精通技術的用戶的需求。

結論：

圖像的重疊在設計界是一個令人興奮的概念。當開發人員必須處理照片的重疊時，您可以採用上述方式。如果您精通 CSS，作為開發人員，您就會知道實際上可以完成您選擇的任何事情。但是初學者可以看看這個教程，讓圖像重疊發生的時間非常少。他應該知道哪個代碼在哪個文件中。