css3 animation 带背景图的闪烁动画出现蒙层怎么解决？

今天写一个灯光闪烁效果,最开始用js控制元素显示隐藏然后觉得这样太粗暴了且性能不太好，后面用animation改变div的透明度的方式来做的。因为这个元素后面有一块大的背景图，元素闪动时总是有一块同此元素宽高的蒙层，试了好多方法终于解决了

有问题的代码：
.light{
opacity:.1;
width:300px;
heigt:200px;
background: url('../img/light.png') no-repeat center;
animation: twinkle .6s ease-in-out infinite;
}
@keyframes twinkle {
 from{
  opacity:.1
 }
 50%{
  opacity:1
 }
 to{
  opacity:.1
 }
}
问题就在这里 动画里除里改变opacity，还要带上背景图。也就是
@keyframes twinkle {
 from{
  background: url('../img/light.png') no-repeat center;
  opacity:.1
 }
 50%{
  background: url('../img/light.png') no-repeat center;
  opacity:1
 }
 to{
  background: url('../img/light.png') no-repeat center;
  opacity:.1
 }