通过使用 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中将背景颜色渐变的更多相关文章

  1. css3的背景颜色渐变@线性渐变

    背景颜色渐变之线性渐变 语法形式: firefox浏览器 background:-moz-linear-gradient(position/deg,startColor,endColor); oper ...

  2. Android特效专辑(二)——ViewPager渲染背景颜色渐变(引导页)

    Android特效专辑(二)--ViewPager渲染背景颜色渐变(引导页) 首页:http://blog.csdn.net/qq_26787115/article/details/50439020 ...

  3. css3背景颜色渐变属性 兼容性测试基础环境为:windows系统;IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+

    css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <li ...

  4. WPF 背景颜色渐变的滑动条实现

    原文:WPF 背景颜色渐变的滑动条实现 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/BYH371256/article/details/83507 ...

  5. css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变

    css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果.这篇文章主要介绍下css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变的方法,以便大家学习参考! 1.css背景颜色渐变 代码: ...

  6. css3背景颜色渐变属性

    https://www.cnblogs.com/ningkyolei/p/4623697.html 很久之前写的一篇文章了,今天重新整理一下关于css3背景渐变的写法,至于是怎么来的,可以看下面渐变的 ...

  7. CSS3实现背景颜色渐变 摘抄

    一. Webkit浏览器 (1) 第一种写法: background:-webkit-gradient(linear ,10% 10%,100% 100%, color-stop(0.14,rgb(2 ...

  8. CSS3实现背景颜色渐变

    CSS3渐变色生成网站:http://gradients.glrzad.com/ 本文参考:前端设计之用CSS3做线性渐变效果http://webskys.com/css3/10.html 在CSS3 ...

  9. Android背景颜色渐变

    ●使用XML的方式为背景添加渐变效果 1.在res/drawable文件夹里添加一个jbshape.xml文件,然后写入如下代码: <?xml version="1.0" e ...

随机推荐

  1. 豆瓣移动端风格的css命名方法与学习

    在CSS取名相对于刚入门来说是最头疼的事情,往往取一个可读性的名字相对以后的代码风格还是很重要的. 在配合团队方面一个好的类名可以帮助同事来理解,增加团队之间的效率有着很大的意义. 豆瓣的前段相对其他 ...

  2. js过滤

    datagrid:                loadFilter: function (data) {                    return loadFilter(data);   ...

  3. 华为oj 计算字符个数

    练手而已 #include <stdio.h> #include <string.h> int main(void) { char string[200]={'\0'}; in ...

  4. 学习unity的第一个小游戏(Roll the ball)的笔记

    1.摄像机的跟随运动,逻辑就是保持摄像机跟主角的距离不变(Undate()函数). offset=trandform.position-player.position. Undate() { tran ...

  5. poj3258 二分 最小值最大化问题

    River Hopscotch Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 10842   Accepted: 4654 ...

  6. C语言中的指针数组和数组指针

    代码: #include <iostream> using namespace std; int main(){ ]; ]; cout<<sizeof(a)<<en ...

  7. GacLib使用方法(一)

    GacLib使用方法 这是vczh大神的GacLib库新手入门,为自己做点笔记,详细的信息可以参考网页.下面简单说说怎么在自己的程序中使用GacLib库,本文只是前述网址中新手教程的一点体验,使用的环 ...

  8. macbook安装mysql

    一.官网下载dmg文件 二.双击安装dmg文件,一路next: 三.

  9. canvas元素大小与绘图表面大小

    原文链接:canvas总结:元素大小与绘图表面大小 前言 我们使用canvas的时候一般在canvas元素中直接设置它的width和height: 1 <canvas id="myCa ...

  10. 序列!序列!- 零基础入门学习Python016

    序列!序列! 让编程改变世界 Change the world by program 你可能发现了,小甲鱼把列表.元组和字符串放在一块儿来讲解是有道理的,我们发现Ta们之间有很多共同点: 1. 都可以 ...