Question

我遵循了仅限css滚动视差效果的教程，但现在我想把图像放在一个圆圈内。

所以我...

1）将父div（“包装器”）设置为我选择的尺寸

2）将父设置为overflow-hidden，（到目前为止，视差效果仍在我的“剪切”框内），

3）...但是当我设置任何类型的边界半径时，它会打破视差效果，当我滚动时将图像冻结到位。

这是我的笔：https://codepen.io/iiiDaNiii/pen/eEBEyY，视差效果在名为“包装器”的方形div内部工作。如果您尝试添加border-radius，则会破坏视差效果。

.html {
  overflow:hidden;
}

.scroll {
  right:0px;
  overflow-y:auto;
  overflow-x:hidden;
  position:absolute;
  height:100vh;
  width:100vw;
  -webkit-overflow-scrowling: touch;
  -webkit-perspective: 1px;
  perspective: 1px;
  perspective-origin: 0% 0%;
  margins: 0px;
  padding: 0px;
  top:0px;
}

.wrapper {
  background-color:blue;
  position:relative;
  height:20em;
  width:20em;
  overflow:hidden;
}

.image {
  position:relative;
  height:vh;
  width:vw;
  -webkit- transform: translateZ(-1px) scale(2);
  transform: translateZ(-1px) scale(2);
  transform-origin: 50% 0;

}

.space{
  position:relative;
  background-color:white;
  height:2000px;
}

任何一种想法？

更新/澄清：我希望圆圈之外的任何东西都是透明的......这样，视差圆圈图像可以位于另一个图像之上。

Answer 1

I believe I've found a solution.

I've added a pseudo-class to the .wrapper element and applied a solid box-shadow to it with a border-radius of 5px, which maintains the parallax effect and also gives rounded corners.

So, add the following selector to your css:

.wrapper:before
{
    position: absolute;
    content: '';
    top: 0; left: 0;
    right: 0; bottom: 0;
    border-radius: 5px;
    z-index: 5;
    box-shadow: 0 0 0 10px white;
}

I created a live Fiddle here.

父div上的border-radius打破了子

1 个答案: