http://www.csscss.org/csssample/200951992.shtml
alpha滤镜是设置对象透明度效果的滤镜,本文通过多个CSS滤镜Filter属性alpha的实例,详细介绍CSS的alpha滤镜语法。首先让我们来了解下alpha的语法
语法
filter：alpha（opacity=opcity，finishopacity=finishopacity，style=style，startX=startX，startY=startY，finishX=finishX，finishY=finishY）
Opacity代表透明度等级，可选值从0到100，0代表完全透明，100代表完全不透明。 Style参数指定了透明区域的形状特征。其中0代表统一形状；1代表线形；2代表放射状；3代表长方形。
Finishopacity是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从0到100。
StartX和StartY代表渐变透明效果的开始坐标。
finishX和finishY代表渐变透明效果的结束坐标。
应用实例
我们采用的图片素材是
应用实例1:鼠标移动到图片上时图片变亮,鼠标离开图片时图片呈现雾色变暗效果。
[CSS在线]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS在线-示例</title>
<style type="text/css">
</style>
</head>
<body>
<img alt="CSS在线DEMO" src="/uploadfile/200905/19/1554522229.jpg" width="300" height="200"
style="-moz-opacity:0.5; filter:alpha(opacity=50);cursor:hand;"
onmouseover="this.style.MozOpacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.MozOpacity=0.5;
this.filters.alpha.opacity=50" />
</body>
</html>
备注：其中 this.filters.alpha.MozOpacity=0.5 是为了在firefox重正确显示Alpha属性 效果
应用实例2:设置style分别为1,2,3显示出的不同的效果,代码如下:
[CSS在线]-示例代码<img alt="powerbookg4.jpg" src="/uploadfile/200905/19/1554522229.jpg" width="150" height="100" style="filter:alpha(opacity=0,finishopacity=100,style=1,startx=0,finishx=150);" />
<img alt="powerbookg4.jpg" src="/uploadfile/200905/19/1554522229.jpg" width="150" height="100" style="filter:alpha(opacity=0,finishopacity=100,style=2);" />
<img alt="powerbookg4.jpg" src="/uploadfile/200905/19/1554522229.jpg" width="150" height="100" style="filter:alpha(opacity=0,finishopacity=100,style=3);" />
StartX、StartY、FinishX、FinishY只有当Style设置为1即渐变效果时才起作用。
应用实例3: 渐渐隐去的跑马灯
[CSS在线]-示例代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS在线-示例</title>
<style type="text/css">
#box{width:300px;height:20px;background-color:#000;vertical-align:middle;padding:5px}
.alpha1 {color:#fff;filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=50,FinishX=0;background-color:#333333};
</style>
</head>
<body>
<div id=box>
<marquee border="0"scrollamount="2" direction="left" scrolldelay="90" behavior="scroll" class="alpha1" >跑马灯内容1,2,3,4,5,6,7,8,9</marquee>
</div>
</body>
</html>
效果如下
CSS代码
[CSS在线]-示例代码#box{width:300px;height:20px;background-color:#000;vertical-align:middle;padding:5px}
.alpha1 {color:#fff;filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=50,FinishX=0;background-color:#333333};
HTML代码
[CSS在线]-示例代码<div id=box>
<marquee border="0"scrollamount="2" direction="left" scrolldelay="90" behavior="scroll" class="alpha1" >跑马灯内容1,2,3,4,5,6,7,8,9</marquee>
</div>
本文来自CSS在线：http://www.csscss.org/csssample/200951992.shtml
分享到：
相关推荐
.filter-alpha { -ms-filter: "alpha(opacity=50)"; filter: Alpha(Opacity=50); } ``` 其中`Opacity`参数用于设置初始透明度，取值范围是0到100，0表示完全透明，100表示完全不透明。此外，还可以设置结束透明度...
CSS滤镜是现代Web设计中一个非常强大的工具，它们允许开发者在不使用任何图像编辑软件的情况下，对网页上的图片和元素应用各种视觉效果。在给定的文件中，提到了一系列的CSS滤镜效果，接下来将对这些滤镜进行详细的...
**CSS滤镜（Filter）详解** CSS滤镜（Filter）是一种强大的工具，它允许...在实际项目中，可以使用在线代码编辑器或本地的`css_filter.chm`帮助文件进行快速查询和参考，以便在需要时查阅具体滤镜属性的详细信息。
本篇将深入探讨CSS滤镜的应用，包括其基本概念、语法以及在实际项目中的实例解析。 一、CSS滤镜的基本概念 CSS滤镜（Filter）是CSS3引入的一项特性，用于对元素内容进行图像处理。它们可以应用在图像、视频、SVG...
CSS滤镜（Filter）是CSS3的一个重要特性，它允许我们对元素应用不同的视觉效果，如模糊、灰度、饱和度调整、对比度调整等。这些滤镜效果可以在不使用图像编辑软件的情况下直接在网页上实时调整，大大提升了设计师的...
本笔记主要介绍了DIV+CSS的基本概念和应用，涵盖了DIV的介绍、CSS的基本语法、CSS的分类、使用CSS统一网站风格、使用滤镜等内容。 DIV+CSS是什么？ ---------------- DIV是HTML中的一个元素，用于存放HTML元素、...
CSS滤镜大全 各类滤镜 HTML滤镜大全 IE滤镜大全
"CSS应用实例--固定不动背景"是一个针对如何使用CSS实现固定背景效果的教程。在本教程中，我们将深入探讨如何创建一个不论用户滚动页面，背景图像始终保持在原位的效果，这种效果常用于网站头部或者底部的设计，以...
二、CSS滤镜实例 1. 模糊效果： ```css .element { filter: blur(10px); } ``` 2. 高对比度： ```css .element { filter: contrast(200%); } ``` 3. 添加阴影： ```css .element { filter: drop-...
全套CSS滤镜特效 全套 CSS 滤镜 特效
使用Dreamweaver的CSS滤镜，你可以创造出各种动态和静态的视觉特效，提升网页的美观度和用户体验。在实际应用中，结合不同的参数设置，滤镜可以产生无数种组合效果，使得网页设计更加丰富多彩。记住，虽然这些滤镜...
在“css样式滤镜实例”中，我们将深入探讨这个主题，了解如何使用滤镜来改变图像、背景乃至整个页面的外观。CSS滤镜主要应用于HTML或SVG元素，它们可以模拟各种图像处理效果，例如模糊、饱和度调整、颜色转换等。 1...
本文将深入探讨“css自动生成滤镜效果”的相关知识点，以及如何使用“微软滤镜调配器”这一工具。 一、CSS滤镜概述 CSS滤镜允许开发者对网页元素应用各种视觉效果，如模糊、饱和度调整、色调变化等。它们通常以滤镜...
在本篇文章中，我们将深入探讨15种不同的CSS滤镜效果，并通过实例展示它们的应用。 1. **彩色底片效果**：`filter: sepia(%)` 和 `filter: grayscale(%)` 可以将图像转换为黑白或sepia色调，百分比参数控制转换的...
总结一下，这个压缩包提供的实例将教你如何使用JavaScript来实现各种按钮特效，包括但不限于事件处理、CSS3动画以及可能的jQuery应用。这些技能对于提升网页交互性和用户体验至关重要，对于前端开发者来说是必不可少...
这个压缩包“CSS实例”包含了多款不同的CSS样式，旨在帮助用户提升其CSS技能，使网页设计更加美观和吸引人。以下是对这些CSS实例的详细解释和相关知识点的阐述。 1. **选择器与属性**： CSS通过选择器来定位需要...
CSS 滤镜详解 CSS 滤镜是一种可以改变 HTML 元素的视觉效果的技术，通过使用滤镜，可以实现各种特殊...在使用 CSS 滤镜时，需要注意浏览器的兼容问题，不同的浏览器对滤镜的支持不同，需要根据不同的浏览器进行调整。
在Dreamweaver中，CSS滤镜为网页设计者提供了丰富的视觉效果工具，使得网页元素能够展现出多样化的动态或静态效果。下面将详细解释Dreamweaver中常用的CSS滤镜及其参数。 ### 1. Alpha Alpha滤镜用于实现透明度的...
在本资源包中，"Adobe Photoshop 典型应用实例--网页设计篇（素材）" 提供了一组专门针对网页设计的教程素材，旨在帮助用户掌握使用Photoshop进行网页设计的关键技巧。Photoshop作为业界领先的图像处理软件，其在...