本站业务范围:1、PC端软件开发、网站开发 2、移动端APP、网站、微信接口、微商城开发 3、视频教程、课程设计和辅导 4、单片机开发 5、串口通讯调试
 当前位置:文章中心 >> Css3.0_css2.0_html5
立即购买视频教程 css3学习笔记颜色和透明度
夜鹰教程网 来源:www.yyjcw.com 日期:2017-11-25 18:38:57
css3学习笔记颜色和透明度

这篇文章不能解决你的问题?我们还有相关视频教程云课堂 全套前端开发工程师培训课程

微信号:yyjcw10000 QQ:1416759661  远程协助需要加QQ!

业务范围:视频教程|程序开发|在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术范围:全端开发/前端开发/webapp/web服务/接口开发/单片机/C#/java/node/sql server/mysql/mongodb/android/。 



1. 颜色 和 透明度


在CSS3中对颜色进行了很多扩展,具体详情可参照官网:www.w3.org/TR/2003/CR-css3-color-20030514,下面说下CSS3中新的数字定义颜色的方法。


1.1 RGBA


相信大家以前定义颜色经常使用RGB,


RGB色彩模式(也翻译为“红绿蓝”,比较少用)是工业界的一种颜色标准,是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB即是代表红、绿、蓝三个通道的颜色,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。


RGBA在RGB的基础上多了控制alpha透明度的参数。以上R、G、B三个参数,正整数值的取值范围为:0 - 255。百分数值的取值范围为:0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A参数,取值在0~1之间,不可为负值。


例如:background-color:rgba(192,192,192,0.5),用RGBA定义颜色不能像RGB一样使用HEX value(#c0c0c0)。


1.2 HSL && HSLA


HSL色彩模式是工业界的一种颜色标准,是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,HSL即是代表色调,饱和度,亮度三个通道的颜色。


语法:hsl(hue, saturation, lightness, alpha).


说明:Hue(色调),取值范围为:(0-360,) 0(或360)表示红色,120表示绿色,240表示蓝色,当然可取其他数值来确定其它颜色;Saturation (饱和度)的值形式为百分比(0%:gray ,100%:full color);Lightness (亮度)值形式也为为百分比(0%:black,100%:white);Alpha(透明度)的取值(0 -1)。


实例:background-color:hsl(120,65%,75%);background-color:hsla(120,65%,75%,0.3);


1.3 Opacity


用来定义元素的透明度,取值范围(0 - 1),其实这种特性,浏览器早就支持了。


例如:opacity:0.5,但IE8和IE之前版本要这么写 filter:Alpha(opacity=50),运用IE所特有的滤镜。


2. 背景


在CSS3中背景增加了background-size,background-origin,background-clip三个新特性,下面来依次讲解这三个特性:


2.1 background-size


指定背景图像的大小,


语法:background-size: length|percentage|cover|contain;


说明:


Value


Description


length


用数值来设定图片的宽度和高度,第一个值为宽度,第二个值为高度,如果只设定一个值,那第二个被设为auto.


percentage


用百分比来设定图片的宽度和高度,第一个值为宽度,第二个值为高度,如果只设定一个值,那第二个被设为auto.


cover


以图片自身的尺寸比例来拉伸图片以封满某个元素.


contain


以图片自身的尺寸比例来拉伸或缩小图片以但某个元素能完全显示此图片


实例:


所用图片smiley


background-image:url('Images/smiley.gif');

    background-repeat:no-repeat;

    background-size:60px 30px;

background-size:60px 30px; background-size:cover; background-size:contain;

 


 


 


 


 


 


2.2 background-origin


指定背景显示的区域。


语法:background-origin: padding-box|border-box|content-box;


说明 :


Value


Description


padding-box


背景图片从padding区域开始显示


border-box


背景图片从border区域开始显示


content-box


背景图片从content区域开始显示


实例:


.bgor1{

    width:200px; height:100px; padding:10px 20px; border:5px orange dotted;

    background-image:url('Images/smiley.gif');

    background-repeat:no-repeat;

    background-position:left top; 

    background-origin:content-box;

}

The background-origin property specifies what the background-position property should be relative to.

2.3 background-clip


指定背景画布开始的区域


语法:background-clip: border-box|padding-box|content-box;


说明:


Value


Description


border-box


从border区域开始裁剪背景


padding-box


从padding区域开始裁剪背景


content-box


从content区域开始裁剪背景


实例:


.bgor2{

    width:250px; height:100px; padding:10px 20px; border:10px orange dotted;

    background-color:#CCCC00;

    background-image:url('Images/smiley.gif');

    background-repeat:no-repeat;

     background-position:left top;

    background-clip:content-box;

}

The background-clip property is supported IE9+, Firefox 4+, Opera, and Chrome.

3 渐变(Gradients)


渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方。


我们做网页一般用图片来做渐变效果,这是个比较好的方法,用图片就不用考虑浏览器兼容性问题了,但在这里我来讲用CSS3来写渐变,目前有webkit核心,moz核心完整支持渐变效果,最新Opera浏览器(11.52)和IE核心支持CSS(用滤镜)也支持线性(liner)渐变。


3.1 各浏览器渐变语法和说明


首先来讲讲webkit核心的浏览器,


参考网址:http://www.webkit.org/blog/1424/css3-gradients/


语法:-webkit-gradient(type, start_point, end_point, / stop...)


-webkit-gradient(type, inner_center, inner_radius, outer_center, outer_radius, / stop...)


说明:


Value


Description


type


渐变的类型,可以是线性渐变(linear)或是径向渐变(radial),由此而来的另外两种渐变写法:-webkit-linear-gradient和-webkit-radial-gradient,大家一般都习惯这种写法


start_point


渐变图像中渐变的起始点


end_point


渐变图像中渐变的结束点


stop


color-stop()方法,指定渐变进程中特定的颜色


inner_center


内部中心点,径向渐变起始圆环


inner_radius


内部半径,径向渐变起始圆


outer_center


外部渐变结束圆的中心点


outer_radius


外部渐变结束圆的半径


webkit核心的浏览器还定义了新的渐变规则:-webkit-repeating-linear-gradient()、-webkit-repeating-radial-gradient(),有兴趣的朋友可以去上面网址里去查看。


接下来说说moz核心的,参考网址:https://developer.mozilla.org/en/Using_gradients


线性渐变语法:-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )


说明:起点的工作方式类似于background position。可以设置水平和垂直位置为百分比,或以像素为单位,或在水平方向上可以使用left/center/right,在垂直方向上可以使用top/center/bottom。位置起始于左上角。如果你不指定水平或垂直位置,它将默认为center,


例如:-moz-linear-gradient(left 20deg, black, white)。


径向渐变语法:-moz-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);


说明:与线性渐变工作类似,径向渐变允许指定渐变的形状(圆形circle 或椭圆形ellipse )和大小(最近端,最近角,最远端,最远角,包含或覆盖 (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover))。例如:


 -moz-radial-gradient(45px 45px, ellipse farthest-corner, aqua 0%, rgba(0, 0, 255, 0) 100%, blue 95%)

再来说说在Opera浏览器中怎么定义渐变,有兴趣的同学可以参考以下网址:

http://dev.opera.com/articles/view/css3-linear-gradients/

http://dev.opera.com/articles/view/css3-radial-gradients/

语法和说明和以上两种浏览器定义差不多,这里就不在进行说明了,例如:-o-linear-gradient(top left,rgba(100,100,100,1),rgba(100,100,100,0.5))。

最后讲讲IE的渐变是怎么样定义的,在IE可使用滤镜Filter,参考网址:http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx,

语法:filter:progid:DXImageTransform.Microsoft.Gradient(sProperties)

Property


Description


Enabled


设定是否进行渐变


EndColor


以颜色名称(red)设定最终颜色(不透明)


EndColorStr


以字符形式(#FF000000 to #FFFFFFFF)设定最终颜色


GradientType


设定渐变的方向( 1:horizontal gradient、


0: vertical gradient.默认为:0)


StartColor


以颜色名称(red)设定开始颜色(不透明)


StartColorStr


以字符形式(#FF000000 to #FFFFFFFF)设定开始颜色


例如:filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1),大家可能注意到在IE下利用滤镜没法做径向渐变,颜色也只能设置开始和结束,不如webkit和moz设置那么灵活,相信IE下个版本会进行这方面的升级,改用标准的CSS的写法。    

3.2 实例说明


先说明线性实例,这在IE也能实现


.linear{

width:130px; height:130px; border:1px solid green; padding:10px;

 background: -webkit-linear-gradient(left, red,white);

 background:-moz-linear-gradient(0deg, red, #fff);

 filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=white,gradientType=1);

 background: -o-linear-gradient(red,white);

 }

 .linear2

 {

 width:130px; height:130px; border:1px solid #e4c700; padding:10px;

 background: -webkit-linear-gradient(45deg, white,#00c9ff 50%,purple 50%,white);

 background:-moz-linear-gradient(45deg, white,#00c9ff 50%,purple 50%,white);

 background:-o-linear-gradient(45deg, white,#00c9ff 50%,purple 50%,white);

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF0099CC', EndColorStr='#000087B4');

}

 


 


 


 


 


 


第二个line2在webkit和moz中定义了四种颜色,并45度渐变。


接下来是径向实例,这是个球,请在webkit 和 moz中查看:


.radial{

    width: 200px; height: 200px; border-radius: 50%; 

    background: -webkit-radial-gradient(30% 30%, white, black);

    background: -moz-radial-gradient(30% 30%, white, black);

}

<div style="background: #d9d3b8"> 

    <div style="background: -webkit-radial-gradient(white,white 30%,rgba(255,255,255,0) 50%);

    background: -moz-radial-gradient(white,white 30%,rgba(255,255,255,0) 50%); 

            padding: 10px 0px 10px 10px;"> 

    <h1>Spotlight On: Gradients</h1> 

 </div> 

<h3>Using RGBA Colors</h3> 

</div>

Spotlight On: Gradients

Using RGBA Colors

接下来说下在webkit下特有的重复渐变:


-webkit-repeating-radial-gradient(top left, circle, #CCFFCC, #33CCCC 10%, #336699 20%);-o-repeating-linear-gradient(20deg,#CCFFCC,#33CCCC 20px);

接下来说下在moz中特有的背景图片渐变:


-moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), url('Images/transparent.png');

transparent


最后展现我在这个系列中第一篇文章中的水晶按钮,加上我进一步对渐变的理解,改进成为跨所有浏览器(最新的微笑)的水晶按钮。


展现CSS:


input.css3btn{

  background: -moz-linear-gradient(270deg, #d2ebf8, #0c8ab5);

  background: -webkit-linear-gradient(top, #d2ebf8, #0c8ab5);

  background: -o-linear-gradient(top, #d2ebf8, #0c8ab5);

  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#000099CC', EndColorStr='#FF0087B4');

  border-top: 1px solid #38538c;

  border-right: 1px solid #1f2d4d;

  border-bottom: 1px solid #151e33;

  border-left: 1px solid #1f2d4d;

  border-radius: 4px;

  box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 2px 0px #1f3053, 0 4px 4px 1px #111111;

  color:#f0f0f0;

  font: bold 20px "helvetica neue", helvetica, arial, sans-serif;

  padding: 10px 0 10px 0;

  text-align: center;

  text-shadow: 0px -1px 1px #1e2d4d;

  width: 150px;

   background-clip: padding-box; }

  input.css3btn:hover {

    box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 3px 0px #1f3053, 0 4px 4px 1px #111111;

    cursor: pointer; }

  input.css3btn:active {

    box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;

    margin-top: 1px; }

水晶按钮

其实这水晶按钮还可以加上些文字特效会更好,关于CSS3的文字特效将在下一章讲解。


复制链接 网友评论 收藏本文 关闭此页
上一条: css3学习笔记文本特效  下一条: css3学习笔记二
夜鹰教程网成立于2008年,目前已经运营了将近 13 年,发布了大量关于 html5/css3/C#/asp.net/java/python/nodejs/mongodb/sql server/android/javascript/mysql/mvc/easyui/vue/echarts原创教程。 我们一直都在坚持的是:认证负责、一丝不苟、以工匠的精神来打磨每一套教程,让读者感受到作者的用心。我们默默投入的时间,确保每一套教程都是一件作品,而不是呆板的文字和视频! 目前我们推出在线辅导班试运营,模式为一对一辅导,教学工具为QQ。我们的辅导学科包括 java 、android原生开发、webapp开发、商城开发、C#和asp.net开发,winform和物联网开发、web前端开发,但不仅限于此。 普通班针对的是国内学员,例如想打好基础的大学生、想转行的有志青年、想深入学习的程序员、想开发软件的初学者或者业余爱好者等。 就业办针对即将毕业上岗的大四学生,或者打算转行的初级开发工程师。 留学生班针对的是在欧美、加拿大、澳洲、日本、韩国、新加坡等地留学的中国学子,目的是让大家熟练地掌握编程技能,按时完成老师布置的作业,并能顺利地通过考试。 详细咨询QQ:1416759661   夜鹰教程网  基于角色的权限管理系统(c-s/b-s)。
  夜鹰教程网  基于nodejs的聊天室开发视频教程
  夜鹰教程网  Git分布式版本管理视频教程
  夜鹰教程网  MVC+EasyUI视频教程
  夜鹰教程网  在线考试系统视频教程
  夜鹰教程网  MongoDB视频教程。
  夜鹰教程网 Canvas视频教程
  夜鹰教程网 报表开发视频教程
  推荐教程/优惠活动

  热门服务/教程目录

  夜鹰教程网  新手必看,详细又全面。
  夜鹰教程网  购买教程  夜鹰教程网  在线支付-方便
  夜鹰教程网  担保交易-快捷安全   夜鹰教程网  闪电发货
  夜鹰教程网  电话和QQ随时可以联系我们。
  夜鹰教程网 不会的功能都可以找我们,按工作量收费。

客服电话:153 9760 0032

购买教程QQ:1416759661  
  热点推荐
什么是css框架
meta标签实现页面的动感效果
CSS半透明滤镜在FIREFOX和IE下面的…
div+css鼠标悬停在div上,div背景色…
纯css下拉菜单特效
div+css的浏览器兼容问题
CSS定义表格线为单一线
CSS滤镜效果收集(全)
列表显示文字和图片垂直居中对齐
在固定位置显示背景图片
网站变换图片的显示方法
在select外面套一个div或span, se…
常用的CSS命名规则
闪字闪字闪字闪字闪字闪字闪字闪字…
css让图片自动适应表格大小
  尊贵服务
夜鹰教程网 承接业务:软件开发 网站开发 网页设计 .Net+C#+VS2008+MSsql+Jquery+ExtJs全套高清完整版视频教程
  最近更新
HTTP协议实现文件断点续传
H5实现断点上传
行内元素和块级元素汇总
H5视频直播技术介绍
border-image详解
你必须知道的HTML5的新特性
html5 js控制音乐播放
HTML+CSS代码规范
css3学习笔记 transition与animat…
css3学习笔记Transform
css3学习笔记2D或3D转换
css3学习笔记文本特效
css3学习笔记颜色和透明度
css3学习笔记二
css3学习笔记一
  工具下载  需要远程协助? 

sql2008视频教程 c#视频教程

VIP服务:如果您的某个功能不会做,可以加我们QQ,给你做DEMO!

JQUERY  Asp.net教程

MVC视频教程  vs2012
.NET+sql开发
手机:15397600032 C#视频教程下载
微信小程序 vue.js高级实例视频教程

教程咨询QQ:1416759661


这篇文章不能解决你的问题?我们还有相关视频教程云课堂 全套前端开发工程师培训课程

微信号:yyjcw10000 QQ:1416759661  远程协助需要加QQ!

业务范围:视频教程|程序开发|在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术范围:全端开发/前端开发/webapp/web服务/接口开发/单片机/C#/java/node/sql server/mysql/mongodb/android/。 



关于我们 | 购买教程 | 网站建设 | 技术辅导 | 常见问题 | 联系我们 | 友情链接

夜鹰教程网 版权所有 www.yyjcw.com All rights reserved 备案号:蜀ICP备08011740号3