html - 让图像在图像的黑色背景上发光

Question

我有以下 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>

我想在 Logo 图像(有效)周围发光。不幸的是，我不能像这样用黑色背景覆盖标题图片:

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

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

Answer 1

如果您想让图像发光，您要么必须在 Photoshop 中添加发光效果。您还可以将 Logo 添加为文本并添加 text-shadow:1px 1px 10px rgba(0,0,0,0.3); 以及您想要的发光颜色。