首页 > web前端 > css教程 > 正文

使用CSS3实现背景颜色渐变

高洛峰
发布: 2017-03-13 14:14:23
原创
2033 人浏览过

这篇文章介绍使用CSS3实现背景颜色渐变 

CSS渐变色概念:

CSS渐变色(Gradients)能让我们用一种颜色渐变的效果修饰一个空间——从一种颜色过渡到另外一种颜色——填充这个空间。渐变色有两个形式:linear (线性渐变) 和 radial (环形渐变)。很显然CSS渐变色(Gradients)技术是产生了一种视觉图案效果,而实现这种视觉效果很简单,能通过简单编程实现。CSS3里很早就引入了CSS渐变色(Gradients),但这种技术的推广却经历了很长时间。

 

CSS渐变色(Gradients)技术基本的语法:

统一代码格式

background-image: linear-gradient(<point> || <angle>,]? <stop>, <stop> [, <stop>]*)
登录后复制

第一个参数是渐变起始点或角。第二个参数是一种颜色停止点(color stops)。至少需要两种颜色(起点和终点),你可以添加任意种颜色来增加颜色渐变的丰富程度。对颜色停止点的定义可以是一种颜色,或一种颜色加一个百分比:

/*  color-stop(percentage/amount, color) */
color-stop(0.20, red)
登录后复制

下面的这段代码基本包括了自顶向下颜色渐变的所有情况:

{	/* 底色 */
	background-color: #063053;
	/* chrome 2+, safari 4+; multiple color stops */
	background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #063053), 
     color-stop(0.66, #395873), color-stop(0.83, #5c7c99));
	/* chrome 10+, safari 5.1+ */
	background-image: -webkit-linear-gradient(#063053, #395873, #5c7c99);	
     /* firefox; multiple color stops */
	background-image: -moz-linear-gradient(top,#063053, #395873, #5c7c99);	
     /* ie 6+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#063053&#39;, endColorstr=&#39;#395873&#39;);
	/* ie8 + */
     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#063053&#39;, endColorstr=&#39;#395873&#39;)";	
     /* ie10 */
	background-image: -ms-linear-gradient(#063053, #395873, #5c7c99);
	/* opera 11.1 */
	background-image: -o-linear-gradient(#063053, #395873, #5c7c99);
	/* 标准写法 */
	background-image: linear-gradient(#063053, #395873, #5c7c99);
}
登录后复制

CSS渐变色(Gradients)技术里还支持带有角度的渐变方向,如45度角方向渐变:

/* fallback */
	background-color:#063053;
	/* chrome 2+, safari 4+; multiple color stops */
	background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.32, #063053), 
     color-s top(0.66, #395873), color-stop(0.83, #5c7c99));
	/* chrome 10+, safari 5.1+ */
	background-image:-webkit-linear-gradient(45deg, #063053, #395873, #5c7c99);
	/* firefox; multiple color stops */
	background-image:-moz-linear-gradient(45deg, #063053, #395873, #5c7c99);
	/* ie10 */
	background-image: -ms-linear-gradient(45deg, #063053 0%, #395873 100%);
	/* opera 11.1 */
	background-image: -o-linear-gradient(45deg, #063053, #395873);
	/* The "standard" */
	background-image: linear-gradient(45deg, #063053, #395873);
}
登录后复制

CSS颜色渐变(Gradients)技术很有价值,但有时很难实现。有时你已经实现了想要的渐变,而浏览器的支持也会成为一个问题。下面是一些使用CSS颜色渐变(Gradients)的建议:

  • 想让你的CSS颜色渐变(Gradients)表现一定的透明度?使用 rgba 颜色。

  • 使用背景色垫底,这样防止当浏览器不支持时不注意没有任何颜色。

  • 火狐浏览器和谷歌浏览器都支持repeating-linear-gradient 和 repeating-radial-gradient,用法是:

background-image: -moz-repeating-linear-gradient(top left -45deg, green, red 5px, white 5px, #ccc 10px);

background-image: -webkit-repeating-linear-gradient(-45deg, green, red 5px, white 5px, #ccc 10px);
登录后复制

效果:

基本的颜色线性渐变,自上而下

使用CSS3实现背景颜色渐变

基本的颜色线性渐变,45度角(Chrome, Safari, Firefox, IE10, Opera)

 使用CSS3实现背景颜色渐变

以上是使用CSS3实现背景颜色渐变 的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板