背景图像的不透明度动画

Question

我目前正试图让#InnerImage的背景图像淡出。下面是#InnerImage代码：

<div id="InnerImage" style="background-image:url('imgurl.com'););background-repeat:no-repeat;background-position:50% 0%;"> 

下面是我使用的代码：（？）

#OuterImage #InnerImage { 
    -webkit-animation: 3s ease 0s normal forwards 1 fadein; 
    animation: 3s ease 0s normal forwards 1 fadein; 
} 

@keyframes fadein{ 
    0% { opacity:0; } 
    66% { opacity:0; } 
    100% { opacity:1; } 
} 

@-webkit-keyframes fadein{ 
    0% { opacity:0; } 
    66% { opacity:0; } 
    100% { opacity:1; } 
} 

我运行到哪里代码正在尽一切其他儿童问题的div #InnerImage中也会淡出，但我只希望背景图像淡入淡出。

我有两个问题：
1）我看过，这是不可能的背景图像不透明度的变化，上面的代码正在执行。有没有解决这个问题的方法？
2）我该怎么做才能让图像淡入后，在无限循环中淡出？

[编辑]

#OuterImage #InnerImage{ 
    -webkit-animation: 3s ease 0s normal forwards 1 fadein; 
    animation: 3s ease 0s normal forwards 1 fadein; 
    animation-iteration-count: infinite; 
} 

@keyframes fadein{ 
    0% { opacity:0; } 
    66% { opacity:0; } 
    100% { opacity:1; } 
} 

@-webkit-keyframes fadein{ 
    0% { opacity:0; } 
    66% { opacity:0; } 
    100% { opacity:1; } 
} 


#OuterImage #InnerImage::before { 
background: url('imgurl.com') no-repeat center left; 
    content: ""; 
    position: absolute; 
    /* the following makes the pseudo element stretch to all sides of host element */ 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    transition: opacity 1s ease 2s; 
    z-index: 1; 
} 
#OuterImage #InnerImage { 
    position: relative;} 
#OuterImage #InnerImage * { 
    position: relative; 
    z-index: 2; 
} 
#OuterImage #InnerImage 

Answer 1

回答你的第一个问题：

把background-image一个伪元素::before而不是在：

#InnerImage::before { 
    background: url('imgurl.com') no-repeat center left; 
    content: ""; 
    position: absolute; 
    /* the following makes the pseudo element stretch to all sides of host element */ 
    top: 0; right: 0; bottom: 0; left: 0; 
    z-index: 1; 
} 

这需要设置position: relative;上#InnerImage：

#InnerImage { 
    position: relative; 
} 

，你需要确保所有其他子元素伪元素上面使用z-index（只适用于你，如果你定位这些元素需要的方式）：

#InnerImage * { 
    position: relative; 
    z-index: 2; 
} 

注意：#OuterImage #InnerImage能可以安全地缩短为#InnerImage，因为无论如何页面中只有一个元素具有任何给定的id值。另外，我建议不要在CSS 中使用id选择器，除非您确定为什么要这样做。

关于你的动画，你似乎希望它在两秒钟后才能启动。这可以实现使用transition这样的：

transition: opacity 1s ease 2s; 

其中1s是transition-duration和2s是transition-delay。

https://developer.mozilla.org/en/docs/Web/CSS/transition

例子：

#InnerImage::before { 
 
    background: url(http://lorempixel.com/300/200) no-repeat center left; 
 
    content: ""; 
 
    position: absolute; 
 
    /* the following makes the pseudo element stretch to all sides of host element */ 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    transition: opacity 1s ease 2s; 
 
    z-index: 1; 
 
} 
 
#InnerImage { 
 
    position: relative; 
 
    width: 300px; 
 
    height: 200px; 
 
} 
 
#InnerImage * { 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 

 
#InnerImage:hover::before { 
 
    opacity: 0.25; 
 
}

<div id="InnerImage"> 
 
    <h2>Hey!</h2> 
 
    <button>noop</button> 
 
</div>

如果你想永久持续的淡入，淡出，你必须去与动画而不是transitio n。

#InnerImage::before { 
 
    background: url(http://lorempixel.com/300/200) no-repeat center left; 
 
    content: ""; 
 
    position: absolute; 
 
    /* the following makes the pseudo element stretch to all sides of host element */ 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    z-index: 1; 
 
    animation: 3s ease 0s normal forwards 1 fadein; 
 
    animation-iteration-count: infinite; 
 
} 
 
#InnerImage { 
 
    position: relative; 
 
    width: 300px; 
 
    height: 200px; 
 
} 
 
#InnerImage * { 
 
    position: relative; 
 
    z-index: 2; 
 
} 
 
@keyframes fadein{ 
 
    0% { opacity:0; } 
 
    50% { opacity: 1; } 
 
    100% { opacity:0; } 
 
}

<div id="InnerImage"> 
 
    <h2>Hey!</h2> 
 
    <button>noop</button> 
 
</div>

Answer 2

要在一个无限循环动画可以使用animation-iteration-count属性和值设置为infinite。

#OuterImage #InnerImage { 
    -webkit-animation: 3s ease 0s normal forwards 1 fadein; 
    animation: 3s ease 0s normal forwards 1 fadein; 
    animation-iteration-count: infinite; 
} 

更改元素的不透明度将影响所有子元素，这是没有办法解决的。

你周围的工作可能会考虑在#InnerImage内部创建一个只处理背景的元素。您将背景div设置为绝对位置，z-index为0，然后只动画该div。这样，随着动画的变化，其他元素不会随着不透明度而改变。

#InnerImage { 
 
    height:200px; 
 
    position:relative; 
 
} 
 

 
.bg { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: red; 
 
    z-index: 0; 
 
    animation-name: fadein; 
 
    animation-duration: 6s; 
 
    animation-fill-mode: forwards; 
 
    animation-iteration-count: infinite; 
 
} 
 

 
.content { 
 
    position: relative; 
 
} 
 

 

 
@keyframes fadein{ 
 
    0% { opacity:0; } 
 
    50% { opacity:1; } 
 
    100% { opacity:0; } 
 
}

<div id="InnerImage"> 
 
    <div class="bg"></div> 
 
    <div class="content">other content</div> 
 
</div>

注意的例子，而背景确实