css 图片透明度设置教程

opacity设置透明度

在图片的属性中加上 opactiy

例子

 代码如下 复制代码

img
{
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}

其实只要这样就OK了,如果不针对IE甚至只要第一行,关键在于——啥,透明度的单词怎么拼,仅此而已。

但上面只能用ie浏览器,后来找到一个兼容性比较强的

 代码如下 复制代码

{filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:
0.5; opacity: 0.5;}

opacity是最重要的,因为它是CSS透明的标准属性,取值范围在0-1之间,目前支持的浏览器有:Firefox、Chrome、Opera、Safari。(也就是说,除了IE,它支持所有主流浏览器);filter:alpha(opacity=50);是专门给IE设定的属性,取值的范围在0-100之间;-moz-opacity是为了兼容一些老版本的Mozilla浏览器,取值范围在0-1之间;-khtml-opacity是为了兼容一些老版本的Safari浏览器,取值范围在0-1之间

时间: 2024-10-28 12:11:56

css 图片透明度设置教程的相关文章

初学解惑:常用CSS样式图文设置教程

css|初学|教程 注:在论坛中记得有人问过,做了网页之后字体特别大?如何控制网页中的字体呢?答案是用CSS来控制,今天给大家编写这个教程主要是面对初学者的! 一个有链接的文本,鼠标ON.OVER不同状态下的响应是不同的,在FLASH中我们可以轻松的在不同帧上进行不同的设置,但如果我们需要在网站中所有的链接中呈现此状态,FLASH制作显然不可想象,或者在页面特定的文字中统一的出现一种链接效果,这就是CSS样式,OK,下面开始: 打开DW MX 2004,新建页面插入表格,设置对齐居中,输入文字(

win8图片密码设置教程

可能您不清楚,图片密码是Win8相较于Win7系统新增的一种登录方式,快速.流畅而且支持用户自定义.Win8图形密码主要由图片和手势两部分构成,极大的方便了触摸屏用户.下面三联教程给大家分享下如何创建win8开机图片密码. 具体步骤如下: 1.开始屏幕,从"设置"超级按钮,点击"更改电脑设置",然后点击"用户". 2.在右侧"登录选项"下点击"创建图片密码",然后按照屏幕上的说明操作, ▲选择创建图片密码

iPhone手机图片壁纸设置教程

当iphone连接上电脑以后打开"我的电脑"或者"计算机" (系统不同叫法不一样) 在下面便携设备就会看到相册的信息,打开以后将里面的照片直接复制到电脑上即可.记得这里不能删除照片. 如何将其他设备的照片和图片上传到iphone中? 1.将iphone连接上电脑打开itunes.然后点击你的设备-XX的iphone. 2.进入你的设备后会看到铃声.程序.音乐.照片等的选项.我们要上传照片选择图片在同步照片前打钩.然后选择来自你电脑上的图片文件夹就可以了. (这里只能

PPT2003/2007/2010中设置图片透明度教程

  PPT2003设置图片的透明度 ①首先,点击菜单栏的"插入",然后在弹出的下来菜单中选择"图片"中的"自选图形"; ②根据自己的需求来插入形状,比如我要将长方形的图片设置透明度,这里我插入矩形; ③右键点击刚才插入的图形,在右键菜单中选择"设置自选图形格式"; ④在弹出的"设置自选图形格式"依次选择-->颜色和线条-->填充-->颜色-->填充效果; ⑤在"填充效果&q

win8系统怎样使用Word设置图片透明度?

  win8系统怎样使用Word设置图片透明度?           具体方法如下: 1.首先点击"插入"选项卡的"插图"选项组中的"形状",选中矩形; 2.按住鼠标左键,进行托页,绘制矩形; 3.然后点击"形状填充"按钮,在弹出的下拉菜单中单击"图片"; 4.在弹出的"插入图片"对话框中,选中"雪景"这张图片,单击"插入"; 5.然后单击&quo

ppt怎样设置图片透明度

  ppt设置图片透明度的方法 ①首先,点击菜单栏的"插入",然后在弹出的下来菜单中选择"图片"中的"自选图形"; ②根据自己的需求来插入形状,比如我要将长方形的图片设置透明度,这里我插入矩形; ③右键点击刚才插入的图形,在右键菜单中选择"设置自选图形格式"; ④在弹出的"设置自选图形格式"依次选择-->颜色和线条-->填充-->颜色-->填充效果; ⑤在"填充效果&quo

css垂直居中怎么设置?文字上下居中和图片垂直居中

css 居中分css垂直居中和css水平居中,水平居中平时比较常用,这里我们主要讲css上下居中的问题.垂直居中又分为css文字上下居中和css图片垂直居中,下面我们就分别来介绍一下. css文字上下居中:一.单行内容的居中.只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置 line-height 和 height,并使两值相等,再加上 over-flow: hidden 就可以了.css代码为{height: 4em;line-height: 4em;overflow: hidde

超酷的jQuery百叶窗图片滑块实现教程

原文:超酷的jQuery百叶窗图片滑块实现教程 今天我们要来分享一款基于jQuery的百叶窗焦点图插件,也可以说是图片滑块插件.这种jQuery焦点图插件的应用非常广泛,在早些年前,我们需要用flash来完成这种百叶窗的效果.如今我们可以用jQuery来实现这个动画效果.这款jQuery百叶窗焦点图不仅可以横向切换,也可以垂直切换,效果都非常不错. 你也可以在这里查看在线演示 下面我们来简单解说一下实现这款jQuery百叶窗焦点图的过程和代码,代码主要由HTML.CSS以及jQuery组成,实现

css 图片底部空隙问题的解决方法

一.开篇 很久很久以前,我数过IE6的七大罪状(七个蛋疼的bug),原文IE6 Bug大盘点,看看你都遇到过哪些[更新中],虽然IE6用户量在不断下降,但我们目前仍需要为那些执迷不悟者考虑,谁让用户是老大呢.好了,今天我就来列出IE6的第八大罪状:图片底部空隙问题,欲了解出解决方案,请往下看吧. 二.症状表现 昨天在改版网站首页时,准备将推荐博客那栏用博主头像显示,并在图片周围加了1px的边框,css教程代码如下:  代码如下 复制代码 #blog_list span.blog_img { di