css - 除了某个 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>

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

提前致谢。

附言我正在使用 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>