我有以下 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 图像发光?我希望,你能理解我的问题。
最佳答案
如果您想让图像发光,您要么必须在 Photoshop 中添加发光效果。您还可以将 Logo 添加为文本并添加 text-shadow:1px 1px 10px rgba(0,0,0,0.3);
以及您想要的发光颜色。
关于html - 让图像在图像的黑色背景上发光,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45381953/