html 透视效果,html – CSS – 对背景图像的“敲除”/透视效果

我认为这里的想法是图像必须足够大,以覆盖网页或至少父母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