資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何正確使用 Bootstrap 的影像疊加？
影像疊加是一個屬性，透過它我們可以顯示任何文字、影像、連結等等在影像上。它允許我們設定文字、影像或其他內容在影像上，使其看起來更美觀。我們可以使用 Bootstrap 定義的影像疊加類 card-img-overlay。此類將允許我們編寫文字或在影像上對齊文字，並使用影像作為我們對齊在其上的文字或連結的背景。
使用此類提供的優勢有哪些？
它允許您在影像上編寫或對齊文字和連結。這使得它看起來像它們的背景影像。
您可以使用圖示或一些文字在使用者懸停在影像上時顯示影像的詳細資訊。
您還可以將影像疊加在具有 Bootstrap 影像疊加類的影像上。
使用 card-img-overlay 類
以下語法將向您展示如何將 card-img-overlay 類與 元素一起使用以在其上疊加其他元素：
<div class = "card"> <img class = "card-img-top" src = "" alt = ""> <p class = "card-img-overlay"></p> </div>
現在讓我們透過在程式碼示例中實際實現它來詳細瞭解它，並瞭解它的實際用途。
步驟
步驟 1 − 在第一步中，我們將定義一個容器，其中包含我們將使用影像疊加類的整個 HTML 程式碼或元素。
步驟 2 − 在下一步中，我們將定義一個 <div> 元素，其類名為 card，它將在網頁上為我們建立一個卡片。
步驟 3 − 在最後一步中，我們將定義 <img> 元素，其類名為 card-img-top 以及另外兩個元素，一個帶有簡單文字，另一個帶有錨標記以顯示空連結。
示例
以下示例將說明如何正確使用 Bootstrap 的影像疊加屬性在影像上疊加內容：
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CSS CDN link included here -->
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel = "stylesheet">
</head>
<body>
<div class = "container">
<center>
<h2> Using image overlay correctly with Bootstrap </h2>
<p> The text over the below image is coming by using the "card-img-overlay" class. </p>
<div class = "card w-40 d-block mx-auto">
<img style = "height: 300px; width: 300px;" class = "card-img-top" src = " https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1GyK6fiCHCRcizXh_dXsFBA5Idw7XayKizQ&usqp=CAU " alt = "Tutorialspoint Logo">
<p class = "card-img-overlay text-center"> This is the overlay text. </p>
<a class = "card-img-overlay text-center pt-5" href = "#"> This is the overlay link. </a>
</div>
</center>
</div>
</body>
</html>
在上面的示例中，我們已將 card-img-overlay 類與我們希望在影像上方的元素或作為影像的疊加文字的元素一起使用。此類將設定影像上的元素，這些元素看起來像是文字的背景影像。
讓我們再看一個程式碼示例，以瞭解如何使用其他疊加元素（如圖示）實現影像疊加類。
此示例和上面示例的演算法幾乎相同，您只需要將包含影像疊加類的元素更改為其他字型真棒圖示元素。
示例
以下示例將說明如何將影像疊加類與不包含文字作為內容而是包含圖示的元素一起使用：
<html>
<head>
<!-- Bootstrap CSS CDN link included here -->
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel = "stylesheet"></head>
<!-- Font Awesome script CDN is included here -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" ></script>
<body>
<div class = "container">
<center>
<h2> Using image overlay correctly with Bootstrap </h2>
<p> The text and the fontawesome icon over the below image is coming by using the "card-img-overlay" class. </p>
<div id = "my-card" class = "card w-40 d-block mx-auto">
<img style = "height: 150px; width: 300px;" class = "card-img-top" src = "https://tutorialspoint.tw/cg/images/logo.png" alt = "Tutorialspoint Logo">
<p class = "card-img-overlay text-center"> This is the overlay text. </p>
<i id = "icon" class = "fas m-auto card-img-overlay text-center fa-search-plus"></i>
<a class = "card-img-overlay text-center pt-5" href = "#"> This is the overlay link. </a>
</div>
</center>
</div>
<script>
var card = document.getElementById('my-card');
card.addEventListener('mouseover', function (){
card.style.opacity = "0.5";
});
card.addEventListener('mouseout', function (){
card.style.opacity = "1";
});
</script>
</body>
</html>
在此示例中，我們使用文字和連結作為疊加內容，但也使用字型真棒圖示作為疊加內容，它在影像中間顯示為放大鏡圖示。透過這種方式，您可以使用不同型別的內容作為 Bootstrap 中影像的疊加內容。
在本文中，我們瞭解瞭如何正確使用 Bootstrap 的影像疊加類，以及如何將影像用作文字、連結和圖示的背景影像。我們藉助兩個不同的程式碼示例檢視並瞭解了它的實際實現。在前面的示例中，我們使用簡單的文字和連結作為疊加內容。而在後面的示例中，我們使用文字、連結以及字型真棒圖示作為影像的疊加內容。
4K+ 瀏覽量
