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

Question

我试图实现以下目标 - 一个带有背景图片的元素，一个覆盖在背景图像顶部的图案，以及一个位于两者之上的框＆＃34;敲出＆＃34;图案但仍显示背景图像。

这是一张显示所需效果的图片：

正如您所看到的那样，图案没有显示在顶部框下方，但您仍然可以看到背景图片。

这是标记：

<div class="bck">
  <div class="bck2"></div>
</div>

<div class="box">
  <p>Text goes here</p>
</div>

CSS：

.bck {
  position: relative;
  height: 800px;
  width: 100%;
  background:url(http://upload.wikimedia.org/wikipedia/commons/7/79/Preller_Norwegian_landscape.jpg)
 }

.bck2 {
  position: absolute;
  height: 800px;
  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: white;
  font-size: 30px;
}

我已尝试使用clip-path，z-index和webkit-background-clip做了一些事情，但似乎无法让组合正确。

任何指针都将非常感激。感谢。

哦，这就是笔：http://codepen.io/juxprose/pen/yyKEqQ

Answer 1

我认为这里的想法是图片必须足够大才能覆盖网页或至少是父网页。

然后，您可以将图像应用于容器和'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;
}

<div class="bck">
    <div class="box">
        <p>Text goes here</p>
    </div>
</div>