Question

我有以下HTML代码：

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

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

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

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

Answer 1

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

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

1 个答案: