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

我遇到了一个问题，其中代码使#InnerImage中的每个其他子（？）div也淡出，但我只想让背景图像淡出。

我有两个问题：
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

示例：

＆＃13;

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

＆＃13;

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

＆＃13;

如果你想要永久性的fadein-fadeout，你必须使用动画而不是过渡。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

要在无限循环中制作动画，您可以使用void max7219_init() { GPIO_Digital_Output(&GPIOE_BASE, _GPIO_PINMASK_11); Chip_Select2 = 0; // SELECT MAX SPI2_Write(0x09); // No decoding SPI2_Write(0x00); Chip_Select2 = 1; // DESELECT MAX Chip_Select2 = 0; // SELECT MAX SPI2_Write(0x0A); SPI2_Write(0x01); // Segment luminosity intensity Chip_Select2 = 1; // DESELECT MAX Chip_Select2 = 0; // SELECT MAX SPI2_Write(0x0B); SPI2_Write(0x07); // Display refresh Chip_Select2 = 1; // DESELECT MAX Chip_Select2 = 0; // SELECT MAX SPI2_Write(0x0C); SPI2_Write(0x01); // Turn on the display Chip_Select2 = 1; // DESELECT MAX Chip_Select2 = 0; // SELECT MAX SPI2_Write(0x00); SPI2_Write(0xFF); // No test Chip_Select2 = 1; // DESELECT MAX }属性并将值设置为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; }内创建一个仅处理背景的元素。您将背景div设置为绝对位置，z-index为0，然后仅设置此div的动画。这样，当动画改变时，其他元素的不透明度不会改变。

＆＃13;

#InnerImage

＆＃13;

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

＆＃13;

请注意，在示例中，文本内容在背景显示时不会消失

背景图像的不透明度动画

2 个答案: