HTML中将背景颜色渐变
通过使用 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中将背景颜色渐变的更多相关文章
- css3的背景颜色渐变@线性渐变
背景颜色渐变之线性渐变 语法形式: firefox浏览器 background:-moz-linear-gradient(position/deg,startColor,endColor); oper ...
- Android特效专辑(二)——ViewPager渲染背景颜色渐变(引导页)
Android特效专辑(二)--ViewPager渲染背景颜色渐变(引导页) 首页:http://blog.csdn.net/qq_26787115/article/details/50439020 ...
- 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 ...
- WPF 背景颜色渐变的滑动条实现
原文:WPF 背景颜色渐变的滑动条实现 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/BYH371256/article/details/83507 ...
- css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变
css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果.这篇文章主要介绍下css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变的方法,以便大家学习参考! 1.css背景颜色渐变 代码: ...
- css3背景颜色渐变属性
https://www.cnblogs.com/ningkyolei/p/4623697.html 很久之前写的一篇文章了,今天重新整理一下关于css3背景渐变的写法,至于是怎么来的,可以看下面渐变的 ...
- CSS3实现背景颜色渐变 摘抄
一. Webkit浏览器 (1) 第一种写法: background:-webkit-gradient(linear ,10% 10%,100% 100%, color-stop(0.14,rgb(2 ...
- CSS3实现背景颜色渐变
CSS3渐变色生成网站:http://gradients.glrzad.com/ 本文参考:前端设计之用CSS3做线性渐变效果http://webskys.com/css3/10.html 在CSS3 ...
- Android背景颜色渐变
●使用XML的方式为背景添加渐变效果 1.在res/drawable文件夹里添加一个jbshape.xml文件,然后写入如下代码: <?xml version="1.0" e ...
随机推荐
- UVA11388 GCD LCM1 2 -1
题目: 给你两个数G和L,求a和b,他们的最大公约数为G和最小公倍数为L,输出a最小时的a和b.如果不存在在输出-1. Sample Input 2 1 2 3 4 Output for Samp ...
- Windows服务承载WCF
Source文件 ------------------------- using System; using System.Collections.Generic; using System.Linq ...
- JavaScript的数据类型转换
首先,由于JavaScript是弱类型语言(弱类型的语言的东西没有明显的类型,他能随着环境的不同,自动变换类型而强类型则没这样的规定,不同类型间的操作有严格定义,只有相同类型的变量才能操作,虽然系统也 ...
- 11 java 反射机制
Java反射机制的适用场景及其利与弊: http://blog.csdn.net/zolalad/article/details/29370565 http://my.oschina.net/u/10 ...
- SQL 经典练习
SQL 基础练习 CREATE TABLE STUDENT(SNO VARCHAR(3) NOT NULL, SNAME VARCHAR(4) NOT NULL,SSEX VARCHAR(2) NOT ...
- jQuery中Ajax事件顺序及各参数含义
Ajax会触发很多事件.有两种事件,一种是局部事件,一种是全局事件: 局部事件:通过$.ajax来调用并且分配. $.ajax({ beforeSend: function(){ // Handle ...
- js拖拽进度条
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx. ...
- NFine常见错误
1.新增数据录入录入不进去提示:An error occurred while updating the entries.See the inner exception for details. 这样 ...
- 谈谈用SQLite和FMDB而不用Core Data
谈谈用SQLite和FMDB而不用Core Data 发布于:2014-04-22 11:22阅读数:4235 凭良心讲,我不能告诉你不去使用Core Data.它不错,而且也在变好,并且它被很多其他 ...
- 开心菜鸟系列学习笔记--------初探Nodejs(了解篇)
一Node.js开始学习了! 1) 输出hellow worlds a.建一个js文件 hello.js 写 console.info('hellow world !!!'); 进入终 ...