如何 - 模糊背景圖片
瞭解如何使用 CSS 建立模糊背景圖片。
模糊背景圖片
注意：此示例不支援 Edge 12、IE 11 或更早版本。
如何建立模糊背景圖片
步驟 1) 新增 HTML
示例
<div class="bg-image"></div>
<div class="bg-text">
<h1>我是 John Doe</h1>
<p>我是一名攝影師</p>
</div>
步驟 2) 新增 CSS
示例
body, html {
height: 100%;
}
* {
box-sizing: border-box;
}
.bg-image {
/* 使用的圖片 */
background-image: url("photographer.jpg");
/* 新增模糊效果 */
filter: blur(8px);
-webkit-filter: blur(8px);
在上面的示例中，我們使用了畫素來設定影像的高度。如果您想使用百分比，例如 100%，使影像適應整個螢幕，請將視差容器的高度設定為 100%。注意：您還必須為 <html> 和 <body> 應用 height: 100%。
height: 100%;
/* 漂亮地居中並縮放圖片 */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* 將文字定位在頁面/圖片中間 */
.bg-text {
background-color: rgb(0,0,0); /* 備用顏色 */
background-color: rgba(0,0,0, 0.4); /* 黑色，帶透明度 */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;
}
自己動手試一試 »
