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