如何 - 疊加
瞭解如何使用 CSS 建立疊加效果。
疊加
瞭解如何建立疊加效果
疊加
如何建立疊加效果
步驟 1) 新增 HTML
使用任何元素並將其放置在文件內的任何位置
示例
<div id="overlay"></div>
步驟 2) 新增 CSS
樣式疊加元素
示例
#overlay {
position: fixed; /* 位於頁面內容頂部 */
display: none; /* 預設隱藏 */
width: 100%; /* 全寬（覆蓋整個頁面） */
height: 100%; /* 全高（覆蓋整個頁面） */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /* 帶有透明度的黑色背景 */
z-index: 2; /* 如果您對其他元素使用不同的順序，請指定堆疊順序 */
cursor: pointer; /* 懸停時新增指標 */
}
步驟 3) 新增 JavaScript
使用 JavaScript 開啟和關閉疊加效果
示例
function on() {
document.getElementById("overlay").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
自己動手試一試 »
帶文字的疊加效果
在疊加層內新增任何您想要的內容，並將其放置在您想要的位置。在此示例中，我們在頁面中央新增文字
示例
<style>
#text{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
</style>
<div id="overlay">
<div id="text">疊加文字</div>
</div>
自己動手試一試 »
