仅包含图像的 css 动画，而不是页面的全部内容

Question

我正在尝试在徽标上创建微光效果。 虽然我可以这样做，但微光效果超出了.png的范围，也可以在页面背景的顶部看到。 谁能帮忙？ `

body {
width: 608px;
height: 342px;
padding: 0px;
margin: 0px;
background-image: url(http://www.whitewaterconnect.com/images/backgrounds/TriangularBackground.jpg);
background-repeat: no-repeat;
font-family: jobber;
overflow: hidden;
}
.splash-logo {
width: 30%;
height: auto;
position: absolute;
top: 1px;
left: 1px;
content: url(http://www.whitewaterconnect.com/images/splash-logo.png);
background-repeat: no-repeat;
z-index: -1;
}
.shine {
width: 200px;
height: 200px;
position: absolute;
top: 1px;
left: 1px;
overflow: hidden;
z-index: 10;
}
.shine:before {
content: "";
position: absolute;
top: 100%;
left: 150%;
height: 150%;
width: 100px;
transform: rotate(45deg);
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
animation: 5s myani linear infinite;
}
@keyframes myani {
0% {
top: -150%;
left: -150%;
}
100% {
top: 150%;
left: 150%;
}
}
div.splash-text {
font-family: jobber;
font-size: 42px;
position: absolute;
top: 825px;
left: 655px;
color: #0099CC;
text-align: center;
}

<div class="body">
</div>
<div class="shine">
</div>
<div class="splash-logo">
</div>

'

Answer 1

如果其他人遇到此问题，请随时参考，这是我开始解决这个问题的。

我基本上创建了一个 z-index 设置为 10 的"凸起"背景。 我用徽标应该去的透明区域重新创建了背景。 有效地，创建一个适合我的徽标的蒙版。 所以，底层是徽标，然后是微光效果，然后是顶部的背景。