码迷,mamicode.com
首页 > Web开发 > 详细

HTML中将背景颜色渐变

时间:2015-11-06 19:25:09      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:

通过使用 css3 渐变可以让背景两个或多个指定的颜色之间显示平稳的过渡,由于用到css3所以需要考虑下浏览器兼容问题,例如:
从左到右的线性渐变,且带有透明度的样式:
#grad {
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */
background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Firefox 3.6 - 15*/
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */

其中rgba()中的4个数字,前3个为颜色rgb,最后1个是透明度,取值0-1,0为透明,1为不透明。

HTML中将背景颜色渐变

标签:

原文地址:http://www.cnblogs.com/liucaixia/p/4943272.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!