我認為這里的想法是圖像必須足夠大,以覆蓋網頁或至少父母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
)
