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

2016-02-19 19:51 0 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);

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

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

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

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

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

延伸阅读
  1.什么是透明代理? 如果你问:我如何才能使得用户的浏览器不需要任何代理设置就能使用我的Squid cache代理服务器上网?此时你就需要使用透明代理。透明代理让你的客户端不需设置任何代理,当包经过透时代理服务器时实际上被重定向到squid代理服务器的代理端口(如8080),即由本地代理服务器向外请求所需数据然后拷贝给客户端。 ...
标签: Web开发
CSS是Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 如何将样式表加入您的网页 你可以用以下三种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。   ...
标签: Web开发
CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。 定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素...
标签: Web开发
使用缩写可以帮助减少CSS文件的大小,更加容易阅读。我看了别人写的一些css样式,发现自己很多时候写的也不够简单和规范。我整理了一些发上来 1.1:颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:#ffffff可以缩写为#fff;#33dd66可以缩写为#3d6; 1.2 盒尺寸 盒模型的缩写刚开始比较难记,可以用顺时针来帮助记忆. 通常有...
标签: Web开发
我们都熟知JavaScript可能会对Web页面的加载与显示产生较大的影响,因此我们常常关注JavaScript是不是会占用客户端较多的资源,然而大部分都会忽略的一件有趣的事情,CSS也会对Web页面载入的效率产生影响。 我们罗列了十几条相关的知识与注意点,大家可以系统的探讨一下,让我们编写的Web页面打开更加流畅。 请不要告诉我,你看...

经验教程

61

收藏

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