通过使用 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. 拉姆达表达式(Lambda Expressions)

    上面两种写法是一样的 ,拉姆达表达式也是一种委托, 但引用的是匿名方法

  2. NFS(网络文件系统)

    http://baike.baidu.com/subview/44349/16134489.htm

  3. 【Solr初探】Solr安装,启动,查询,索引

    1. 安装&启动 官网:http://lucene.apache.org/solr/ 下载源代码,解压,进入根目录(我把solr放在/usr/local/solr下) 在/usr/local/ ...

  4. javaWeb RSA加密使用

      加密算法在各个网站运用很平常,今天整理代码的时候看到了我们项目中运用了RSA加密,就了解了一下. 先简单说一下RSA加密算法原理,RSA算法基于一个十分简单的数论事实:将两个大质数相乘十分容易,但 ...

  5. hdu 确定比赛名次

    算法:拓扑排序 题意:有一个比赛,现在知道很多队之间的关系:让你去让确定比赛排名: Problem Description 有N个比赛队(1<=N<=500),编号依次为1,2,3,... ...

  6. ext4 grid edit 添加删除行

    extjs--grid动态添加一行和删除一行: (1)选择rowEditing时,添加一行后的编辑方式为----startEdit(record,columnHeader) (2)选择cellEdit ...

  7. jquery 做出专业的界面,SHOW 一下最近的成果~~~

    最近在项目中把整个UI框架重新做了一下,都是用Jquery实现的,没有使用EXT.EasyUI那一类的UI框架再也不用担心版权问题啦~~~~~~ 接下来我会在博客中把常用的功能分享出来,先上一下动态T ...

  8. 现有C2B模式小总结

    现有的C2B模式 目前常见的C2B模式有: l  聚合需求形式(反向团购.预售等) l  要约形式(逆向拍卖,客户出价,商家选择是否接受等) l  服务认领形式(企业发布所需服务,个人认领,类似威客等 ...

  9. IPTABLES封闭和开放端口

    这个是个细心活儿,如果只开放特定端口,则在每一条规则里都要加上相应的端口. 任何一条不配DPORT,都有可能放行了其它端口. -A INPUT -p tcp -m tcp --dport 80 -m ...

  10. DDP和DDU什么区别

    DU/DDP 就是A发货给国外B,B只要呆在家里看电视,货会自动送上门,当中的所有运输清关等事情都是由A来负责(A可以委托货代来负责),区别就是DDU是不包括税金的,也就是货值的百分之多少,税金会在B ...