理解CSS前景色和透明度
2016-02-25 22:45
417 查看
前面的话
颜色的出现让网页不再只是黑白,运用好颜色设计,能让网页增色不少。一个网页给人们留下的第一印象实际上就是它的整体颜色。关于如何设置颜色,请移步CSS的6种颜色模式。实际上,颜色的应用主要分为前景色、背景色和透明三个部分。本文主要介绍前景色和透明度。color前景色
值: <color> | inherit初始值: 用户代理特定的值
应用于: 所有元素
继承性: 有
【影响边框】
一般来说,前景是元素的文本,不过前景还包括元素周围的边框。有两种方式直接影响一个元素的前景色,可以使用color属性,也可以使用属性border-color设置边框颜色
【继承颜色】
color是可以继承的,可以把文档中的所有正常文本设置为某种颜色,如通过声明body{color:red;}设置为红色。这会把所有没有其他样式的文本变成红色(如锚就不包含在内,锚有其自己的颜色样式)。但浏览器对表单类元素有预定义的颜色,使body颜色无法继承到表单类元素中
opacity透明(IE8-浏览器不支持)
opacity是CSS3中专门用来设置透明度的一个属性,opacity只能给整个元素设置一个透明度,并且其透明度直接会继承给其后代元素值: value | inherit
value:默认值是1,可以取0-1的任意浮点数。其中,1表示完全不透明,0表示完全透明
初始值: 1
应用于: 所有元素
继承性: 无
【兼容性】
IE8-浏览器不支持opacity透明属性,可以使用其专用的滤镜来实现opacity透明属性的透明效果
filter:alpha(opacity=透明值),该透明值是0-100之间的任意整数
opacity: 0.8; filter:alpha(opacity=80);
相关文章推荐
- CSS水平/垂直居中方法一览
- 导航条div+css实现
- CSS学习
- 一些常用css技巧的为什么(二)我所理解的line-height
- 详解css3中webkit-animation
- CSS属性选择器
- HTML+CSS 整站 步骤
- CSS动画@-webkit-keyframes
- [CSS学习笔记001] CSS Reset
- 用CSS3特性直接绘图,半圆角,三角形,圆形等
- 页面定制CSS代码初探(一):页面变宽 文本自动换行 图片按比缩放
- css中锚点剖析 & 血泪教训
- css3,background-clip/background-origin的使用场景,通俗讲解
- 热力图样式
- css滚动条样式制定 jscrollpane
- MFC 窗口样式
- css设置文字不换行,超过的部分用“...”代替
- IE各版本,Firefox,opera浏览器之间的兼容css hack,亲测有效
- CSS3制作各种形状图像(转)
- 实现CSS抠图-从集合图中抠出小图