通过使用 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. IL（Intermediate Language）

    释义: IL是.NET框架中中间语言(Intermediate Language)的缩写.使用.NET框架提供的编译器可以直接将源程序编译为.exe或.dll文件,但此时编译出来的程序代码并不是CPU ...

  2. 后台js

    Response.Write("<script>alert('该用户名不存在或密码错误或未参加教学活动,请重新输入!');history.back()</script> ...

  3. Java ------------获取不会重复的随机数

    import java.util.UUID; public class UTest {    public static void main(String[] args) { //UUID通过rand ...

  4. java基础2

    //第一个程序 用super访问父类中被隐藏的成员变量和被重写的方法 package foxe; class superClass{ int x; superClass(){ x=4; System. ...

  5. 学习MVC框架之一

    一.MVC的概述 MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑和数据显示分离的 ...

  6. dug

    http://blog.csdn.net/ysy441088327/article/details/8992393 http://www.cnblogs.com/Leo_wl/p/4423922.ht ...

  7. .net 实现注册邮箱验证激活

    没事上网当了个注册邮箱验证激活的代码,用起来感觉还不错,特意和大家要一起分享一下 下面是主要实现代码: uing System.Net.Mail; public partial class jquer ...

  8. rr

        times = gcd(rotdist,length);  printf( ;i<times;i++) {  t = vec[i];   j = i;    ) {   k = j+ r ...

  9. 03--理解HelloWorld结构

    作为程序猿还是要代码来说事的,现在开始进入到具体的代码中来.国际惯例HelloWorld打头阵,我也不能免这个俗. Win32入口函数中主要代码如下: main.cpp // 创建应用实例 AppDe ...

  10. Bootstrap学习笔记(未整理)

    强调class 这些class通过颜色来表示强调.也可以应用于链接,当鼠标盘旋于链接上时,其颜色会变深,就像默认的链接样式. <p class="text-muted"> ...