html - CSS - "knock-out"/背景图像的透视效果

Question

我正在尝试实现以下目标 - 一个带有背景图像的元素，一个位于背景图像顶部的图案，以及一个位于两者之上的框，该框“剔除”了图案但仍显示背景图像.

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

如您所见，图案没有显示在顶框下方，但您仍然可以看到背景图像。

这是标记:

<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

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

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