Question

我正在尝试创建一个背景，该背景会使用彩虹的阴影来改变颜色。我不想要任何平滑过渡，我希望它们能够立即改变。对于阴影，我的意思是它不是从红色到橙色到绿色e.t.c，我的意思是它使用每种颜色的阴影。

有点难以解释，我是从this网站获得的。如果你点击检查元素＆＃39;在登录页面上，然后访问控制台，你会看到一堆彩虹文字。用于实现此目的的代码是：

background:linear-gradient(to left, red,orange,yellow,green,blue,indigo,violet)

正如你在那里看到的那样，代码中的每种颜色都有一堆不同的色调。我如何使用它，但作为我的网页的背景？

Answer 1

要立即更改背景颜色，我们可以使用jquery来完成。看到这个链接。

https://jsfiddle.net/9bcgw7x4/6/

$(document).ready(function(){
  var a = 1;
  var add =2;

  function changeBG(){
    var r = Math.floor((255 * a) / 100);  
    var g = Math.floor((255 * (100 - a)) / 100);
    var b = Math.floor((255 * a) / 100);  
    if(a<=0){
      add = 2;
    }else if(a>99){
      add=-2;
    }  
    a=a+add;    
    $('body').css('background-color', 'rgb('+r+','+g+','+b+')');
  }    
  setInterval(changeBG, 1000);

});

Answer 2

背景随着彩虹的所有色调而变化：

＆＃13;

    setInterval(function () {
        document.body.style.background = "red";
        setTimeout(function () { document.body.style.background = "orange" }, 1000);
        setTimeout(function () { document.body.style.background = "yellow" }, 2000);
        setTimeout(function () { document.body.style.background = "green" }, 3000);
        setTimeout(function () { document.body.style.background = "blue" }, 4000);
        setTimeout(function () { document.body.style.background = "indigo" }, 5000);
        setTimeout(function () { document.body.style.background = "violet" }, 6000);
    }, 1000);

＆＃13;

body{
transition:background 1s linear;
}

＆＃13;

背景随着彩虹的颜色移动：

＆＃13;

body{
  color:white
}

＆＃13;

<marquee scrollamount="20" style="position:fixed;top:0;left:0;bottom:0;right:0;width:100%;height:100vh;z-index:-9999999;margin:0;padding:0">
<div style="width:200%;height:100vh;margin-left:-100%;background:linear-gradient(to left, red,orange,yellow,green,blue,indigo,violet,red,orange,yellow,green,blue,indigo,violet);"></div>
</marquee>

body body body body body body body body body body body body body body body body body

＆＃13;

Answer 3

尝试使用transition-timing-function，如step-start和step-end。

var a = function b(){
        //some code
        }
b(); //Doesn't work

请参阅小提琴，了解：https://jsfiddle.net/9bcgw7x4/5/

在小提琴的代码中，用您想要的背景颜色替换背景颜色。

<强>更新

Answer 4

以下是您正在寻找的代码示例。如果您希望将其应用于整个页面，则应将其添加到body标签中。我使用http://www.colorzilla.com/gradient-editor/生成了此代码段。

body { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6db3f2+0,f9e759+0,f9e759+0,f9e759+0,f2f257+16,e85353+16,e85353+57,4239a0+57,4239a0+57,4239a0+83,66ff5b+83,66ff5b+83 */
background: #6db3f2; /* Old browsers */
background: -moz-linear-gradient(left, #6db3f2 0%, #f9e759 0%, #f9e759 0%, #f9e759 0%, #f2f257 16%, #e85353 16%, #e85353 57%, #4239a0 57%, #4239a0 57%, #4239a0 83%, #66ff5b 83%, #66ff5b 83%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #6db3f2 0%,#f9e759 0%,#f9e759 0%,#f9e759 0%,#f2f257 16%,#e85353 16%,#e85353 57%,#4239a0 57%,#4239a0 57%,#4239a0 83%,#66ff5b 83%,#66ff5b 83%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #6db3f2 0%,#f9e759 0%,#f9e759 0%,#f9e759 0%,#f2f257 16%,#e85353 16%,#e85353 57%,#4239a0 57%,#4239a0 57%,#4239a0 83%,#66ff5b 83%,#66ff5b 83%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#66ff5b',GradientType=1 ); /* IE6-9 */ }

以下是您提到的颜色示例。

linear-gradient(to left, red 15%, orange 15%, orange 30%, yellow 30%, yellow 45%, green 45%, green 60%, blue 60%, blue 75%, indigo 75%, indigo 90%, violet 90%, violet)

使用不同颜色的阴影更改背景颜色

4 个答案: