使用CSS添加渐变背景

我决定在渐变背景上重复旋转一些东西。我已经有了“旋转反复”的部分，但渐变背景不起作用。使用CSS添加渐变背景

HTML：

<img src="http://i.imgur.com/gQioYac.png"> 
<img src="http://i.imgur.com/gQioYac.png"> 
<img src="http://i.imgur.com/gQioYac.png"> 
<img src="http://i.imgur.com/gQioYac.png"> 
<img src="http://i.imgur.com/gQioYac.png"> 
<div id="css-gradient"></div>

CSS：

img { 
    animation-name: rotate; 
    animation-iteration-count: infinite; 
    animation-duration: 1s; 
    animation-direction: reverse; 
    animation-timing-function: ease-in; 
    animation-play-state: running; 
    float: left 
} 

@keyframes rotate { 
    from { 
     transform: rotate(0deg); 
    } 
    to { 
     transform: rotate(360deg); 
    } 

    #css-gradient { 
     background: linear-gradient(blue, white) 
     height: 100px; 
     width: 100px; 
    } 
}

我还张贴作为一个小提琴，所以你可以看到它在行动：

https://jsfiddle.net/ywtfsju1/

来源

2015-12-26 Mike

大家好，欢迎堆栈溢出！通常情况下，您希望在帖子中发布代码（尽管为了方便起见添加小提琴也很好）。您不需要重复按空格，您可以选择代码并在编辑器中按下“{}”图标，或者按Ctrl-K，它将格式化为您的代码块。在这篇文章中，我已经为你做了这件事，但如果你格式化原文，将来会更简单。 –

你的括号中有一些错误，这里是工作小提琴：https://jsfiddle.net/ywtfsju1/1/

#css-gradient {在@keyframes rotate {，不是它在它之后。

您应该使用代码缩进为了避免这种错误

来源

2015-12-26 22:52:30 CoderPi

感谢代码，但现在图像分层渐变，我试过z索引和移动代码的命令，它没有工作。 jsfiddle为了方便https://jsfiddle.net/yw2me6oa/3/我想让它变得像梯子一样起着图片的背景。 – Mike

那样？ https://jsfiddle.net/3L80odw0/1/ – CoderPi

你先生是魔术师。谢谢:) – Mike

使用CSS添加渐变背景

回答

相关问题