可以叠两层背景图.
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);
}