以圖片①為背景虛擬成為②
image.png
- CSS使用
filter: blur(20px);實(shí)現(xiàn)高斯模糊效果相种，周邊會(huì)出現(xiàn)擴(kuò)展的白邊洋幻；overflow: hidden;防止高斯模糊引起的擴(kuò)散transform: scale(1.5);解決因?yàn)楦咚鼓：鸬陌走?/li>- 注意： 元素被高斯模糊以后胡控，其所有的子元素都會(huì)被模糊
.father {
position: relative;
// 防止高斯模糊引起的擴(kuò)散
overflow: hidden;
.bg {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
-webkit-filter: blur(20px);
// css高斯模糊
filter: blur(20px);
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
// 解決因?yàn)楦咚鼓：鸬陌走? transform: scale(1.5);
}
}
