《通过 css 创建透明图像是很容易的》由会员分享，可在线阅读，更多相关《通过 css 创建透明图像是很容易的（10页珍藏版）》请在金锄头文库上搜索。
1、通过 CSS 创建透明图像是很容易的。 注释：CSS opacity 属性是 W3C CSS 推荐标准的一部分。 亲自试一试 - 实例 创建透明图像 - Hover 效果 在本例中，当用户将鼠标指针移动到图片上时，会改变图片的透明度。 创建文本在背景图像上的透明框 本例创建了一个包围文本的半透明框。 实例 1 - 创建透明图像 定义透明效果的 CSS3 属性是 opacity。 首先，我们将展示如何通过 CSS 来创建透明图像。 常规图像： 带有透明度的相同图像： 请看下面的 CSS： img opacity:0.4;filter:alpha(opacity=40); /* 针对 IE8 以及
2、更早的版本 */ IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置 的值从 0.0 到 1.0。值越小，越透明。 IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越 透明。 实例 2 - 图像透明度 - Hover 效果 请把鼠标指针移动到图像上： CSS 是这样的： img opacity:0.4; filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */ img:hover opacity
3、:1.0; filter:alpha(opacity=100); /* 针对 IE8 以及更早的版本 */ 第一个 CSS 代码块类似实例 1 中的代码。此外，我们已经设置了当鼠标指针位于图像上时的样式。在 这个例子中，当指针移动到图像上时，我们希望图像是不透明的。对应的 CSS 是：opacity=1。 IE8 以及更早的浏览器：filter:alpha(opacity=100)。 当鼠标指针移出图像后，图像会再次透明。 实例 3 - 透明框中的文本 This is some text that is placed in the transparent box. This is some t
4、ext that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. 源代码是这样的：div.background width: 400px;height: 266px;background: url(/i/tulip_peach_bloss
5、om_w.jpg) no- repeat;border: 1px solid black; div.transbox width: 338px; height: 204px;margin:30px;background-color: #ffffff;border: 1px solid black;/* for IE */filter:alpha(opacity=60);/* CSS3 standard */opacity:0.6; div.transbox p margin: 30px 40px; This is some text that is placed in the transpar
6、ent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box.首先，我们创建一个 div 元素 (class=“background“)，它有固定的高度和宽度、背景图像，以及边框。 然后我们
7、在第一个 div 内创建稍小的 div (class=“transbox“)。“transbox“ div 有固定的宽度、背景 色和边框 - 并且它是透明的。在透明 div 内部，我们在 p 元素中加入了一些文本。 媒介类型(Media Types)允许你定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听 觉浏览器等等。 媒介类型 某些 CSS 属性仅仅被设计为针对某些媒介。比方说 “voice-family“ 属性被设计为针对听觉用户终端。 其他的属性可被用于不同的媒介。例如，“font-size“ 属性可被用于显示器以及印刷媒介，但是也许会带 有不同的值。显示器上面的显示的文档
8、通常会需要比纸媒介文档更大的字号，同时，在显示器上，sans- serif 字体更易阅读，而在纸媒介上，serif 字体更易阅读。 media规则 media 规则使你有能力在相同的样式表中，使用不同的样式规则来针对不同的媒介。 下面这个例子中的样式告知浏览器在显示器上显示 14 像素的 Verdana 字体。但是假如页面需要被打 印，将使用 10 个像素的 Times 字体。注意：font-weight 被设置为粗体，不论显示器还是纸媒介：media screen p.test font-family:verdana,sans-serif; font-size:14px media prin
9、t p.test font-family:times,serif; font-size:10px media screen,print p.test font-weight:bold .不同的媒介类型 注释：媒介类型名称对大小写不敏感。 媒介类型 描述 all 用于所有的媒介设备。 aural 用于语音和音频合成器。 braille 用于盲人用点字法触觉回馈设备。 embossed 用于分页的盲人用点字法打印机。 handheld 用于小的手持的设备。print 用于打印机。 projection 用于方案展示，比如幻灯片。 screen 用于电脑显示器。 tty 用于使用固定密度字母栅格的媒
10、介，比如电传打字机和终端。 tv 用于电视机类型的设备。 本节列出了在使用 CSS 时尽量避免使用的技术。 Internet Explorer Behaviors 它是什么？Internet Explorer 5 引入了行为 (behaviors)。behaviors 是一种通过使用 CSS 向 HTML 元素添加行为的方法。 为什么要避免它？只有 Internet Explorer 支持 behavior 属性。 用什么代替？请使用 JavaScript 和 HTML DOM 取而代之。 例子 1 - Mouseover Highlight 下面的 HTML 文件中有一个 元素，它为 元素定
11、义了一个行为：h1 behavior: url(behave.htc) Mouse over me!下面是 XML 文档 “behave.htc“：function hig_lite() element.style.color=red; function low_lite() element.style.color=blue; behavior 文件包含了针对元素的 JavaScript 和 事件句柄。 如果您使用 Internet Explorer，可以亲自试一下（把鼠标放在例子中的文本上）。 例子 2 - Typewriter Simulation 下面的 HTML 文件中有一个 元素，它
12、为 id 为 “typing“ 的元素定义了一个行为：#typing behavior:url(behave_typing.htc);font-family:courier new; IE5 introduced DHTML behaviors. Behaviors are a way to add DHTML functionality to HTML elements with the ease of CSS.How do behaviors work? By using XML we can link behaviors to any element in a web page and
13、manipulate that element.下面是 XML 文档 “behave.htc“：var i,text1,text2,textLength,t; function beginTyping() i=0; text1=element.innerText;textLength=text1.length; element.innerText=“; text2=“; t=window.setInterval(element.id+“.type()“,speed); function type() text2=text2+text1.substring(i,i+1); element.innerText=text2; i=i+1; if (i=textLength)clearInterval(t); 如果您使用 Internet Explorer，可以亲自试一下。
