CSS3 渐变 线性渐变
线性渐变的一般结构是:
代码如下:
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);
其中各个浏览器渲染不同,又分为:
Webkit:
代码如下:
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);
渐变类型 - 在属性里-webkit-linear-gradient
渐变从哪开始(top)
颜色取值和在渐变中的位置 (rgba(0,0,0,0.1) 40%)
下面的写法是用于safari旧版本的
代码如下:
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(40%, rgba(0, 0, 0, 0.1)), color-stop(98%, rgba(0, 0, 0, 0.2)),color-stop(100%, #FFFFFF));
渐变类型 (linear)
渐变开始的X Y 轴坐标(0 0 或者left-top)
渐变结束的X Y 轴坐标(0 100% 或者left-bottom)
颜色取值 (color-stop(40%, rgba(0,0,0,0.1)))
Mozilla:
代码如下:
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);
Firefox渲染渐变的写法和Safari大致相同,不同的是需要将渐变属性改为-moz-linear-gradient
Opera:
代码如下:
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);
按照上面的写法,让Opera浏览器渲染直接将属性改为-o-linear-gradient,是不是很简单?
IE:
IE比较顽固,不支持渐变,但是提供了渐变滤镜
代码如下:
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#22FFFFFF', EndColorStr='#33000000');
说了这么多,大家对例子里rgba(0, 0, 0, 0.1) 中的0.1是不是很好奇?没错,解决这个头疼问题的关键就是它 - 渐变透明度。设置渐变透明度(值从0.1-0.9)可以使渐变颜色处在不同值的透明度下,也就是说通过透明度,背景可以呈现不同透明度下的背景颜色。
下面图片是用上面代码生成的背景渐变:
是不是看不出渐变透明(感觉灰灰的)?没错,因为颜色取值是从白到黑,那中间的过渡色自然就是灰色的了。但是如果你在加上一个背景颜色的话,那效果就出来了。
比如我们加个background-color: #92D050:
你只需要配置background-color, 就可以让背景呈现不同的渐变色。
完整的代码:
代码如下:
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(40%, rgba(0, 0, 0, 0.1)), color-stop(98%, rgba(0, 0, 0, 0.2)),color-stop(100%, #FFFFFF));
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#22FFFFFF', EndColorStr='#33000000');
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);
background-color: #669900;
其中rgba()中的颜色(rgb)一般取白色(255,255,255)或者黑色(0,0,0), 而透明度的设置就看你自己想要什么样的渐变效果了。
下面是几个不同渐变色的例子:
代码如下:
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);
代码如下:
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 2%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.2) 98%, #FFFFFF 100%);
代码如下:
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 2%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.2) 98%, rgba(255, 255, 255, 0.9) 99%);
所以如果能很好的运用背景渐变的透明度,可以在很大程度上定义统一的背景渐变色,而用户只需要输入一个颜色域,就可以把主题配置成想要的渐变效果。不过遗憾的是,这种方法就现在而言,只能适用于背景渐变颜色相近的主题。多余一种颜色的背景渐变还是得用这种写法
代码如下:
background: linear-gradient(to bottom, #396E8E 0%, #336888 29%, #225777 67%, #194E6E 100%);
CSS3 渐变 线性渐变相关推荐
- CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- html垂直线性渐变,再说CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- html渐变线条代码,CSS3实现线性渐变用法示例代码详解
前言 演示下太老版本浏览器的渐变实现了[IE9-]; IE9以前,渐变都是通过滤镜实现的,大体的写法就是这样; .testDiv { width:400px; height:400px; border ...
- CSS3 linear-gradient线性渐变实现虚线等简单实用图形
一.作为图片存在的CSS3 gradient渐变 我觉得CSS3 Backgrounds比较厉害的一个地方就是支持多背景,也就是背景图片个数可以无限累加,正好CSS3的gradient渐变性质是 ba ...
- 再说CSS3渐变——线性渐变
渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...
- CSS3的线性渐变(linear-gradient)
CSS3渐变(gradient)可分为线性渐变(linear-gradient)和径向渐变(radial-gradient).今天给大家说一说线性渐变. 以webkit内核浏览器为例, 语法: div ...
- CSS3 渐变: 线性渐变 linear-gradient 和 径向渐变 radial-gradient
渐变背景也是CSS3 的新特性,通过它可以在不使用图像的情况下,创建从一种颜色到另一种颜色的过渡.使用渐变的好处是,可以减少对图像的依赖,进而降低浏览网页时的带宽消耗,提高网站的访问速度. 渐变,就是 ...
- html语言加号点一下变成减号6,CSS3 linear-gradient线性渐变生成加号和减号的方法...
在商城项目中,购物车是一个很重要的功能.其中最常见的是购物车中对库存的"+-"操作,包括抢购后面有很多算法.但是作为前端来说,购物车的结算中的+-就是一个计算而已.传统的实现方式是 ...
- CSS3背景线性渐变
5.背景线性渐变:background-gradient (1)linear:线性渐变, 谷歌浏览器:(webkit) background:-webkit-gradient(linear ,0 0, ...
最新文章
- 4G EPS 中的无线资源类型
- idea 自定义工具栏
- 【语义分割】ASPP:Rethinking Atrous Convolution for Semantic Image Segmentation
- Codeforces Round #703 (Div. 2) B.Eastern Exhibition 中位数结论
- 用C#改写Head First Design Patterns--SingleTon(原创)
- python自动化测试xpath_selenium自动化测试:5.xpath八种定位方式
- group by 按什么区别_失业补助金和失业保险金有什么区别,按什么标准领?不知道亏大了...
- mysql建立索引_MySQL 索引及优化实战(一)
- Spring Boot不指定包路径就可以扫描启动类所在包及其子包下的类是怎么做到的?
- 【C语言】18-变量类型
- 家用风扇控制系统c语言程序设计,[信息与通信]家用风扇控制系统.doc
- win7下安装Jira(破解加汉化)
- ipa在线安装搭建_iphone直接安装ipa文件怎么做?
- gnome黑屏 ubuntu_记Ubuntu开机黑屏及解决过程
- 汉语拼音方案里的O(哦)和 UO(窝)
- html 导航切换内容
- PUT和POST的区别?
- 控制电路中的紧急停止按钮,该用常开点NO还是常闭点NC?
- AMR A级处理器排名
- Unity实现模型点击