背景图像的不透明度动画 [英] Opacity Animation for background-image

问题描述

我目前正在尝试使#InnerImage的背景图像逐渐淡出.这是#InnerImage的代码:

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

这是我正在使用的代码:

  #OuterImage #InnerImage {-webkit-animation:3 s缓解0 s正常转发1淡入；动画:3s缓解0s正常向前1淡入；}@keyframes fadein {0％{透明度:0;}66％{透明度:0;}100％{不透明度:1;}}@ -webkit-keyframes淡入{0％{透明度:0;}66％{透明度:0;}100％{不透明度:1;}} 

我遇到了一个问题，即代码使#InnerImage中的所有其他child(?)div也逐渐消失，但是我只希望背景图像逐渐消失.

我有两个问题:
1)我确实读过上面的代码正在执行的背景图像不透明度更改是不可能的.有没有解决的办法?
2)如何进行制作，以便在图像淡入后以无限循环的方式淡出?

  #OuterImage #InnerImage {-webkit-animation:3 s缓解0 s正常转发1淡入；动画:3s缓解0s正常向前1淡入；animation-iteration-count:无限；}@keyframes fadein {0％{透明度:0;}66％{透明度:0;}100％{不透明度:1;}}@ -webkit-keyframes淡入{0％{透明度:0;}66％{透明度:0;}100％{不透明度:1;}}#OuterImage #InnerImage :: before {背景:url('imgurl.com')不可重复居中；内容: "";位置:绝对；/*以下内容使伪元素扩展到宿主元素的所有侧面*/最高:0;正确:0；底部:0;左:0；过渡:不透明度1s缓解2s；z索引:1；}#OuterImage #InnerImage {位置:相对；}#OuterImage #InnerImage * {职位:相对z索引:2；}#OuterImage #InnerImage 

解决方案

第一个问题的答案:

将背景图片放在伪元素 :: before 上:

  #InnerImage :: before {背景:url('imgurl.com')不可重复居中；内容: "";位置:绝对；/*以下内容使伪元素扩展到宿主元素的所有侧面*/最高:0;正确:0；底部:0;左:0；z索引:1；} 

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

  #InnerImage {职位:相对} 

，您需要使用 z-index (仅在放置这些元素时采用您需要的方式)，以确保所有其他子元素都位于伪元素之上:

  #InnerImage * {职位:相对z索引:2；} 

注意:由于页面上可能只有一个元素具有任何给定的 id #OuterImage #InnerImage 可以安全地缩短为 #InnerImage >仍然有价值.另外，我建议不要在CSS 中使用 id 选择器，除非您确定要这么做的原因.

关于动画，似乎您希望它只在两秒钟后才能开始.可以使用这样的 transition 来实现:

 转换:不透明度1s缓解2s； 

其中 1s 是 transition-duration ，而 2s 是 transition-delay .

https://developer.mozilla.org/en/docs/Web/CSS/转换

示例:

  #InnerImage :: before {背景:网址(http://lorempixel.com/300/200)左无重复中心；内容: "";位置:绝对；/*以下内容使伪元素扩展到宿主元素的所有侧面*/最高:0;正确:0；底部:0;左:0；过渡:不透明度1s缓解2s；z索引:1；}#InnerImage {职位:相对宽度:300像素；高度:200px；}#InnerImage * {职位:相对z索引:2；}#InnerImage:hover :: before {不透明度:0.25;}  

 < div id ="InnerImage">< h2>嘿！</h2>< button> noop</button></div>  

如果要永久进行淡入淡出，则必须使用动画而不是 transition .

  #InnerImage :: before {背景:网址(http://lorempixel.com/300/200)左无重复中心；内容: "";位置:绝对；/*以下内容使伪元素扩展到宿主元素的所有侧面*/最高:0;正确:0；底部:0;左:0；z索引:1；动画:3s缓解0s正常向前1淡入；animation-iteration-count:无限；}#InnerImage {职位:相对宽度:300像素；高度:200px；}#InnerImage * {职位:相对z索引:2；}@keyframes fadein {0％{透明度:0;}50％{不透明度:1；}100％{透明度:0;}}  

 < div id ="InnerImage">< h2>嘿！</h2>< button> noop</button></div>  

I'm currently attempting to get the background image of #InnerImage to fade out. Here is the code for #InnerImage:

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

Here's the code that I'm using:

#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; }
}

I'm running into an issue where the code is making every other child(?) div within #InnerImage fade out as well, but I only want the background-image to fade.

I have two questions:
1) I did read that it was not possible for background-image opacity changes that the above code is performing. Is there a work around for this?
2) How do I go about making it so that after the image has been faded in, it fades back out in an infinite loop?

[EDIT]

#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 to your first question:

Put the background-image on a pseudo element ::before instead:

#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;
}

This requires to set position: relative; on #InnerImage:

#InnerImage {
  position: relative;
}

and you need to make sure all other child elements are above the pseudo element using z-index (which only applies the way you need if you position those elements):

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

Notice: #OuterImage #InnerImage can be safely shortened to #InnerImage since there may be only one element on a page with any given id value anyway. Also I'd advise not to use id selectors in CSS unless you know for sure why you are doing it.

Regarding your animation, it seems like you want it to start only after two seconds have gone by. This can be achieve using a transition like this:

transition: opacity 1s ease 2s;

where 1s is transition-duration and 2s is transition-delay.

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

Example:

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

If you want a permanently on-going fadein-fadeout, you'll have to go with an animation instead of a 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;
  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>

这篇关于背景图像的不透明度动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！