Question

我有2个div。我试图在顶部的半透明div中制作一个圆孔，以查看底部div。

此代码运行良好，但不适用于Safari。似乎边界半径打破了这一点。有野生动物园的解决方案吗？

＆＃13;

.bg {
   position: absolute;
width: 100%;
height: 100%;
background: url("https://www.nature.com/polopoly_fs/7.44180.1495028629!/image/WEB_GettyImages-494098244.jpg_gen/derivatives/landscape_630/WEB_GettyImages-494098244.jpg") no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.cover {
  position: absolute;
  top: 50px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  width: 160px;
  height: 160px;
  box-shadow: 0 0 0 99999px;
  color: rgba(30, 30, 30, .8);
  border-radius: 100%;
}

＆＃13;

<div class="bg"></div>
<div class="cover"></div>

＆＃13;

Answer 1

看起来Safari无法与box-shadow一起处理大border-radius点差值因此，如果可以接受，您可以减少差价。

否则您可以像我在下面的代码段中那样使用border：

＆＃13;

.bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("https://www.nature.com/polopoly_fs/7.44180.1495028629!/image/WEB_GettyImages-494098244.jpg_gen/derivatives/landscape_630/WEB_GettyImages-494098244.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.cover {
  position: absolute;
  top: -99949px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate3d(-50%, 0, 0);
  width: 160px;
  height: 160px;
  color: rgba(30, 30, 30, .8);
  border-radius: 100%;
  border: solid 99999px;
}

＆＃13;

<div class="bg"></div>
<div class="cover"></div>

＆＃13;

Safari颜色和边框半径

1 个答案: