1. css的濾鏡實現：通過filter實現。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
/*此處背景圖自行替換*/
background: green no-repeat center center fixed;
background-size: cover;
min-height: 100vh;
box-sizing: border-box;
margin: 0;
padding-top: calc(50vh - 6em);
font: 150%/1.6 Baskerville, Palatino, serif;
}
/**
* 整體居中功能；
* 背景透明虛化
* 溢出隱藏
* 邊緣圓角化
* 文字增加淡陰影
*/
.description{
position: relative;
margin: 0 auto;
padding: 1em;
max-width: 23em;
background: hsla(0,0%,100%,.25) border-box;
overflow: hidden;
border-radius: .3em;
box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
0 .5em 1em rgba(0, 0, 0, 0.6);
text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
}
/*使用濾鏡模糊邊緣*/
.description::before{
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: -30px;
z-index: -1;
-webkit-filter: blur(20px);
filter: blur(20px);
}
</style>
</head>
<body>
<p class="description">
SIF4項目原常務副總指揮/重慶京東方智慧電子系統有限公司
</p>
</body>
</html>
2. 通過濾鏡背景圖片實現：在背景色上覆蓋上一層濾鏡半透明的圖片。
1.png圖片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
/*此處背景圖自行替換*/
background: green no-repeat center center fixed;
background-size: cover;
min-height: 100vh;
box-sizing: border-box;
margin: 0;
padding-top: calc(50vh - 6em);
font: 150%/1.6 Baskerville, Palatino, serif;
}
.description {
color: #fff;
position: relative;
margin: 0 auto;
padding: 1em;
background-image: url("1.png") no-repeat;
background-size:100% 100%;
width: 350px;
height: 254px;
background: linear-gradient(90deg, #0070C6 0%, #83C5FF 100%) border-box;
box-shadow: 0 3px 7px 0 rgba(35,101,145,0.75);
border-radius: 10px;
}
.bg{
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<p class="description">
<img src="1.png" class="bg">
SIF4項目原常務副總指揮/重慶京東方智慧電子系統有限公司
</p>
</body>
</html>