除某个 div 外的图像上发光答案

【问题标题】：Glow on image except a certain div除某个 div 外的图像上发光
【发布时间】：2016-08-31 17:19:54
【问题描述】：

所以我的图像上有一个橙色的光晕，除了包含标题的底部 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>

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

提前致谢。

附：我正在使用引导框架，它可能具有一些使这更容易/可行的功能。

【问题讨论】：

请显示 complete 标记，包括 CSS。
@Scott 我错过了什么重要的事情吗？这只是我完整网站的一小部分。无意冒犯，因为我会发布一些 css，但我的 css 很乱，我已经解释了我设置发光和图像的方式，这些是重要的部分，对吧？
针对您的问题发布相关的 CSS 代码。不是全部。
@GerritIest 如何在没有看到相关 CSS 的情况下解决 CSS 问题？
@GerritIest，您需要创建一个minimal reproducible example，以便我们看到您的问题并尝试解决它。根据您提供的内容，我们无法为您提供帮助，任何解决方案都只是猜测

标签： css twitter-bootstrap

【解决方案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>

【讨论】：

感谢您准确地理解我想要什么并交付它！