当浅蓝色逐渐变为深蓝色时，如何使背景颜色开始？
[英]How do I make my background colour start off as light blue gradually become dark blue?
问题描述
I would really like to know how to create this effect in Javascript where the background gradient changes radially. 
我真的很想知道如何在背景渐变沿径向变化的Javascript中创建此效果。 How do they do this? 他们怎么做到的？
3 个解决方案
解决方案1
1 2015-10-09 09:32:43
You do not need javascript in this work, just use CSS radial-gradient 您在这项工作中不需要javascript，只需使用CSS radial-gradient
#grad { width: 100px; height: 100px; background: radial-gradient(circle, #474747, #999); /* Standard syntax */ }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div id="grad"></div> </body> </html>
解决方案2
1 2015-10-09 09:33:53
With ColorZilla you can generate the following, that is compatible with almost all browsers: 使用ColorZilla，您可以生成与几乎所有浏览器兼容的以下内容：
.gradient-class
{
background: #7db9e8; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #7db9e8 0%, #1e5799 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#7db9e8), color-stop(100%,#1e5799)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #7db9e8 0%,#1e5799 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #7db9e8 0%,#1e5799 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #7db9e8 0%,#1e5799 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #7db9e8 0%,#1e5799 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#1e5799',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
解决方案3
0 2015-10-09 09:35:02
Hope this will be helpful 希望这会有所帮助
<div class="abc">
</div>
.abc{
width:200px;
height:200px;
display:inline-block;
background: rgba(73,155,234,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(73,155,234,1) 32%, rgba(32,124,229,1) 60%, rgba(32,124,229,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(73,155,234,1)), color-stop(32%, rgba(73,155,234,1)), color-stop(60%, rgba(32,124,229,1)), color-stop(100%, rgba(32,124,229,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(73,155,234,1) 32%, rgba(32,124,229,1) 60%, rgba(32,124,229,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(73,155,234,1) 32%, rgba(32,124,229,1) 60%, rgba(32,124,229,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(73,155,234,1) 0%, rgba(73,155,234,1) 32%, rgba(32,124,229,1) 60%, rgba(32,124,229,1) 100%);
background: radial-gradient(ellipse at center, rgba(73,155,234,1) 0%, rgba(73,155,234,1) 32%, rgba(32,124,229,1) 60%, rgba(32,124,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5', GradientType=1 );
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何使用 css/html/js 将背景颜色从亮蓝色变为深蓝色 - how to make background color from bright blue to dark blue using css/html/js
如何将这个div置于中心并使用浅蓝色背景锁定其他所有内容 - How to put this div in center and lock everything else with light blue background
如何在移动视图中将突出显示的导航项更改为蓝色背景而不是蓝色边框底部 - How do I change the highlighted nav item to have a blue background instead of a blue border-bottom in mobile view
如何使线条红色和蓝色？ - How to make the line red and blue?
如果我的页面上有Google Map，如何在其周围画一个带有半径和蓝点的“圆”？ - If I have a Google Map on my page, how do I draw a “circle” around it with a radius and a blue dot?
如何使用 useState 钩子将我的反应图标的颜色更改为蓝色？ - How do I use the useState hook to change the color of my react icons to blue?
如何强制更新我的反应代码中的组件以将深色主题切换为浅色主题 - How do I force Update my components in my react code to toggle dark theme to light theme
如何为云耀斑的应用程序使颜色变暗，变亮和自定义？ - How do i make colours dark, light and custom for a cloud flare app?
如何制作aa：悬停逐渐有其他颜色 - How to make a a:hover gradually have other colour
如何使主体具有与style =“ background-color：returnBlue（）”相同的style属性，其中returnBlue（）返回“ blue”？ - How can I make the body take a style attribute equating to style=“background-color: returnBlue()”, where returnBlue() returns “blue”?
相关标签