![]()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
.box {
/* 首先子絕父相，給父盒子一個定位， */
position: relative;
height: 600px;
margin: 0px auto;
/* 加入背景圖片 */
background: url(images/1.jpg) no-repeat center;
/* 背景圖片大小和盒子大小一樣 */
background-size: 100% 100%;
}
/* 利用僞元素來做父盒子的一個模糊效果 */
.box::after {
content: "";
/* 寬度和高度和父盒子大小背景一樣 */
width: 100%;
height: 100%;
/* 進行定位 */
position: absolute;
/* 繼承父盒子的背景圖片 */
background: inherit;
/* 加入模糊效果 */
filter: blur(5px);
/* 背景圖片和父盒子背景圖片大小是一樣的 */
background-size: 100% 100%;
/* 加入層級 */
z-index: 3;
}
.box .pp {
/* 設置新盒子模型，防止內邊距撐大盒子問題 */
box-sizing: border-box;
/*這是子盒子，這個也讓其絕對定位，脫
離原來位置，不保留位置 */
position: absolute;
/* 子盒子大小 */
height: 300px;
width: 300px;
/* 子盒子位置 */
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
/* 子盒子內容離子盒子的上邊框的大小 */
padding-top: 100px;
/* 背景圖片繼承父盒子 */
background: inherit;
/* 文本水平居中 */
text-align: center;
/* 文本大小和行高 */
font-size: 18px;
line-height: 18px;
/* 加入層級，提高它的層級 */
z-index: 13;
}
</style>
</head>
<body>
<div class="box">
<div class="pp">
總有一些人在等你,沿途風景很美好<br>
別忘了有人在此等你!
</div>
</div>
</body>
</html>
