主要的思路就是在背景图片之上,再叠加一层纯白的实色背景。为了让下层的图片背景透过边框区域显示出来,我们需要给两层背景指定不同的 background-clip 值。最后一个要点在于,我们只能在多重背景的最底
层设置背景色,因此需要用一道从白色过渡到白色的 CSS 渐变来模拟出纯白实色背景的效果。
<!--html-->
<div class="box">
主要的思路就是在背景图片之上,再叠加一层纯白的实色背景。
为了让下层的图片背景透过边框区域显示出来,我们需要给两层
背景指定不同的 background-clip 值。最后一个要点在于,我们
只能在多重背景的最底层设置背景色,因此需要用一道从白色过
渡到白色的 CSS 渐变来模拟出纯白实色背景的效果。
</div>
<!--css-->
.box{
padding: 1em;
width: 300px;
margin: 0 auto;
border: 1em solid transparent;
background: linear-gradient(white, white),
url(1.jpg);
background-size: cover;
background-clip: padding-box, border-box;
}