cocos中如何让背景模糊_怎样做出这个模糊的背景效果

可以叠两层背景图.

content设置同样的背景图,通过background-position定位使之与底部的背景图重叠.

html

样式html,body{

height: 100%;

margin: 0;

}

body{

background-image: url("./10.jpg");

background-size: 900px 383px;

}

.center-box{

display: flex;

align-items: center;

justify-content: center;

}

.content{

width: 280px;

height:280px;

overflow: hidden;

border-radius: 8px;

box-shadow: 0 2px 10px rgba(0,0,0,.08);

}

.box{

transform: translate(-10px, -10px);

background-image: url("./10.jpg");

background-color: rgba(155, 144, 144, 0.8);;

background-size: 900px 383px;

background-position: calc(calc(300px - 900px) / 2) calc(calc(300px - 383px) / 2);

width: 300px;

height: 300px;

filter: blur(5px);

}