让图像在图像上的黑色背景上发光答案

【问题标题】：Let an Image glow on a black Background on an Image让图像在图像上的黑色背景上发光
【发布时间】：2018-01-05 00:32:48
【问题描述】：

我有以下 HTML 代码：

.header-container {
  position: relative;
}

.header-container img {
  -webkit-filter: grayscale(100%) contrast(300%);
  filter: grayscale(100%) contrast(300%);
}

.header-container .after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: white;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/ITunes_12.2_logo.png/600px-ITunes_12.2_logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.header-container:hover .after {
  -webkit-filter: drop-shadow(0px 0px 10px #ff5f00);
  filter: drop-shadow(0px 0px 10px #ff5f00);
}

<div class="header-container">
  <span class="image fit"><img src="http://images.wookmark.com/167422_battlefield-dinosaur-facebook-timeline-cover-facebook-banner.jpg" alt="" /></span>
  <div class="after">This is crazy</div>
</div>

我想在徽标图像周围发光（作品）。不幸的是，我不能像这样用黑色背景覆盖标题图像：

background: rgba(0, 0, 0, 0.8);

当我这样做时，整个页眉区域都会变黑，而不仅仅是徽标图像。当标题图像顶部有黑色背景时，如何让徽标图像发光？我希望你能理解我的问题。

【问题讨论】：

标签： html css image filter background

【解决方案1】：

如果您想让您的图像发光，您必须在 Photoshop 中添加发光。您还可以将您的徽标添加为文本，并使用您希望的发光颜色添加text-shadow:1px 1px 10px rgba(0,0,0,0.3);。

【讨论】：