CSS Alpha透明代码相关知识学习

2016-02-19 19:51 4 1 收藏

今天图老师小编要向大家分享个CSS Alpha透明代码相关知识学习教程,过程简单易学,相信聪明的你一定能轻松get!

【 tulaoshi.com - Web开发 】

  图片的透明效果是网页中需要用到的一种特殊形式,虽然不是非常的常用,但是遇到这样的需求往往有点措手不及,在我们的文章中虽然有这方面的CSS实例,但还没有系统的介绍过CSS Alpha透明,我们今天共同学习一下相关的知识。

  关于CSS Alpha透明的相关知识。先请看如下代码:
filter:alpha(opacity=50);       /* IE */
-moz-opacity:0.5;              /* Moz + FF */
opacity: 0.5;           /* 支持CSS3的浏览器(FF 1.5也支持)*/

  简单解释,IE使用私有属性filter:alpha(opacity),Moz Family使用私有属性-moz-opacity,而标准的属性是opacity(CSS 3, Moz Family部分支持CSS3)。后面的数值是透明度,使用百分比或者小数(alpha(opacity))使用大于0小于100的数值,其实也是百分比)。

  从上面的代码中你没有看到Opera。没错,Opera还未支持标准的opacity,也没有其私有的可支持Alpha透明的属性。

  但是,我们知道,Opera是支持Alpha透明的PNG图片的(当然Moz Family也支持)。所以我们可以使用背景图片来实现Alpha透明效果。
background:transparent url(alpha80.png) left top repeat!important;
background:#ccc;
filter:alpha(opacity=50);

  既然Moz Family支持Alpha透明的PNG,所以我们没有必要使用其私有属性了。当然,你可以使用标准的opacity,但别同时使用Alpha透明图片和opacity,这样的话就成了两者的混合了。你可以把上面的例子下载过来,然后/*opacity:.5;*/的注释看看。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

资料引用:http://www.knowsky.com/441123.html

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

来源:http://www.tulaoshi.com/n/20160219/1622006.html

延伸阅读
标签: Web开发
一、可设置的CSS属性包括:字体属性、文本属性、颜色及背景属性、边框属性、容器属性(边距属性、填充属性)、分类属性、鼠标属性。 二、基础属性 字体属性:font-family font-style font-variant font-weight font-size 文本属性:word-spacing letter-spacing text-decoration vertical-align&...
标签: Web开发
CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。 定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素...
标签: Web开发
CSS是Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 如何将样式表加入您的网页 你可以用以下三种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。   ...
标签: Web开发
    alpha滤镜 给制作网页特效提供了较大的创作空间,但由于它控制参数较多,在实际应用时,为了确定一组合适的参数值,不得不反复调整修改,在编辑窗口和预览窗口来回倒腾,甚是麻烦,本文介绍了一种简单的方法。制作一个Alpha滤镜参数测试板,在测试板上输入参数值后,点一下鼠标,立即可看到结果,完全的立等可见,使你很...
标签: Web开发
我们都熟知JavaScript可能会对Web页面的加载与显示产生较大的影响,因此我们常常关注JavaScript是不是会占用客户端较多的资源,然而大部分都会忽略的一件有趣的事情,CSS也会对Web页面载入的效率产生影响。 我们罗列了十几条相关的知识与注意点,大家可以系统的探讨一下,让我们编写的Web页面打开更加流畅。 请不要告诉我,你看...

经验教程

13

收藏

19
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部