Question

我需要删除透明png下方的盒子阴影。现在，您可以在透明的半圆下看到框阴影。我能以某种方式做到吗？

这里是演示。

问题部分在徽标下。

header {
    border-bottom: none;
    height: 50px;
    padding: 20px 0 20px 0;
    background: rgba(255,255,255,0.9);
    z-index: 10 !important;
    -webkit-box-shadow: 0px 0px 6px 5px rgba(0,0,0,0.22);
    box-shadow: 0px 0px 6px 5px rgba(0,0,0,0.22);
      position: fixed;
    top: 0px;
    width: 1000px;
  margin:0 auto 0 auto;
  left:0px
  
}

<html>
<header>
  <img src="https://png.pngtree.com/element_our/sm/20180518/sm_5aff6089d3e02.png" style="height:80px;margin-left:200px">
  <img src="http://vitezslavlorenc.cz/obloucek2.png" style="width: 51px;
    height: 8px;
    /* position: relative; */
    bottom: -8px;
    position: absolute;
    left: 215px;">
</header>
<div style="height:1000px;  width: 1000px;
  ;
  position:relative;">
  <img src="https://wpshindig.com/content/uploads/2018/02/Feature-Header-Image.png" style="position:absolute;top:0px;width:1000px;z-index:-1" >
</div>

https://codepen.io/korwinus/pen/bZJOgM

Answer 1

看看这个codepen链接

https://codepen.io/hoonin/pen/OqYVRr

虽然不能仅在那部分“隐藏”框阴影，但是可以使图像的z-index值比带有框阴影的元素高。这意味着它将显示在“上方”。在图像中添加背景色和一些底部填充会产生一种错觉，即盒子阴影会在该区域消失。

这是我为图像制作的类的代码（将内联样式删除为）：

 .ig-logo {
  background-color:#fff;
  border-radius:50%;
  z-index:9999;
  height:80px;
  margin-left:200px;
  padding-bottom:5px;
}

去除徽标透明部分正下方的盒子阴影

1 个答案: