HTML中将背景颜色渐变

最新推荐文章于 2021-08-03 19:26:22 发布

weixin_30858241

最新推荐文章于 2021-08-03 19:26:22 发布

阅读量150

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/liucaixia/p/4943272.html

本文详细介绍了如何使用CSS3渐变来创建背景颜色的平滑过渡，并着重讨论了不同浏览器下的兼容性问题，包括从左到右的线性渐变以及如何设置透明度。

通过使用 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为不透明。

转载于:https://www.cnblogs.com/liucaixia/p/4943272.html