除了某个div之外，在图像上发光

Question

所以我的图像上有橙色的光芒，除了在包含标题的底部div之外，我想要到处都是。

缩短版本的构建方式

<div class="navbar-header"> <!-- Has a background image in css which is the base image -->
    <div class="glow-orange"> <!-- Has a background color: rgba(247, 147, 29, 0.4) -->
        <div class="title"> <!-- Is being positioned bottom in the middle -->
            Title
        </div>
    </div>
</div>

这是一个非常简单的图像，用于显示此设置。蓝色将是我发光的形象。他们的灰色条是透明的。我希望灰色条后面的图像部分是图像的原始颜色而不是橙色发光。

提前致谢。

P.S。我正在使用bootstrap框架，可能有一些功能使这更容易/可行。

Answer 1

执行此操作的一个选项是在标题上使用大box-shadow，在父元素上使用overflow: hidden。

.navbar-header {
  width: 250px;
  height: 150px;
  background: url('http://www.lenntech.com/images/Home/Waterdrop775.png');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.glow-orange {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
}
.title {
  width: 150px;
  text-align: center;
  height: 50px;
  box-shadow: 0px 0px 0px 150px rgba(247, 147, 29, 0.4);
}

<div class="navbar-header">
  <div class="glow-orange">
    <div class="title">Title</div>
  </div>
</div>