html - 删除 Logo 透明部分下方的框阴影

标签 html css

我需要删除透明 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

最佳答案

看看这个代码笔链接

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;
}

关于html - 删除 Logo 透明部分下方的框阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55363169/

相关文章:

css - -webkit-appearance 强制转换?

css - 蓝图 CSS 重叠 div

html - 在图像顶部显示一个 div

html - 为什么我的 <hr> 元素在同一页面上呈现不同?

javascript - 单击时切换 div(更喜欢 CSS,但 Jquery 也可以)

html - 从 li 元素中删除空格

CSS 和文本垂直距离规范

javascript - 如何通过 Javascript 创建 WinJS Flyout

javascript - jQuery Mouseover/MouseOut 在 IE 9 中不起作用

javascript - 如何防止绝对定位元素被切断并仍然保持盒子阴影包围父div?