Html 在css中使图像忽略动画_Html_Css_Image_Animation_Slideshow

Html 在css中使图像忽略动画

html css image animation

Html 在css中使图像忽略动画,html,css,image,animation,slideshow,Html,Css,Image,Animation,Slideshow,我制作了一个以6幅图片为背景的幻灯片的网页。问题是，我有一个特定的PNG徽标，它以背景为动画，就像在徽标上应用不透明动画一样，但我希望徽标保持稳定，没有动画我的HTML代码： <html> <head> <title>Creative Designs</title> <link rel="shortcut icon" href="Images/Icon.ico"> <link rel="stylesheet" typ

我制作了一个以6幅图片为背景的幻灯片的网页。问题是，我有一个特定的PNG徽标，它以背景为动画，就像在徽标上应用不透明动画一样，但我希望徽标保持稳定，没有动画

我的HTML代码：

<html>
 <head>

 <title>Creative Designs</title>
 <link rel="shortcut icon" href="Images/Icon.ico"> 
 <link rel="stylesheet" type="text/css" href="Css/Style1.css" />

 </head>
  <body bgcolor="black">
  <div class="logo" align="center" "><img src="Images/Logo.png" alt="Header" /></div>

   <ul class="slideshow">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

</body>

我刚刚通过将幻灯片图像的索引改为-1而不是0得到了答案

 .slideshow li {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-size: cover;
background-position: 50% 50%;
opacity: 0;
z-index: -1;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}

除非我弄错了，否则这是不可能的。我认为你的问题在于：@Marc在小提琴中，你使用了PNG图像作为背景。在我的例子中，它是一个适合屏幕的JPG图像。如果你使用JPG图像，它将无法工作。啊，好的，请随时更新小提琴，因为它可能会帮助人们测试可能的解决方案。

 .slideshow li {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-size: cover;
background-position: 50% 50%;
opacity: 0;
z-index: -1;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}