我认为这里的想法是图像必须足够大,以覆盖网页或至少父母div ..
然后,您可以将图像应用于容器和’inner’div的背景.
覆盖可以通过伪元素而不是单独的div来实现.
修订结构 –
.bck {
position: relative;
height: 800px;
width: 100%;
background:url(http://webneel.com/wallpaper/sites/default/files/images/08-2013/23-3d-beach-sand-wallpaper.jpg);
background-repeat: no-repeat;
background-position: center center;
}
.bck::before {
content:'';
position: absolute;
height: 100%;
width: 100%;
top: 0;
left:0;
background:url(https://s3.amazonaws.com/f.cl.ly/items/2W0c3z1z2z3w3A2b0j2w/bck.png);
}
.box {
border: 10px solid white;
padding: 80px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: red;
font-size: 30px;
background:url(http://webneel.com/wallpaper/sites/default/files/images/08-2013/23-3d-beach-sand-wallpaper.jpg);
background-position: center center;
}
Text goes here
)
