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的一个重要特性，它允许我们对元素应用不同的视觉效果，如模糊、灰度、饱和度调整、对比度调整等。这些滤镜效果可以在不使用图像编辑软件的情况下直接在网页上实时调整，大大提升了设计师的...
CSS滤镜大全 各类滤镜 HTML滤镜大全 IE滤镜大全
本文将详细介绍几种常见的CSS滤镜效果及其应用方法。 #### 二、CSS滤镜基础知识 **1. 基本概念** CSS滤镜是一种可以应用于HTML元素的视觉效果处理方式。它可以模拟图像处理软件（如Photoshop）中的某些滤镜效果，...
### CSS滤镜效果大全 #### 一、Alpha滤镜 - 设置透明度 Alpha滤镜用于控制元素的透明度。此滤镜提供了丰富的参数配置来实现不同程度的透明效果，包括简单的透明度调整到复杂的渐变透明。 - **表达格式**： ```...
PostCSS彩色十六进制Alpha 允许您遵循规范在CSS中使用4和8个字符的十六...const postcssColorHexAlpha = require ( 'postcss-color-hex-alpha' ) ; postcss ( [ postcssColorHexAlpha ( /* pluginOptions */ ) ] )
使用Dreamweaver的CSS滤镜，你可以创造出各种动态和静态的视觉特效，提升网页的美观度和用户体验。在实际应用中，结合不同的参数设置，滤镜可以产生无数种组合效果，使得网页设计更加丰富多彩。记住，虽然这些滤镜...
CSS3的滤镜（filter）属性是一个强大的工具，它允许开发者对网页元素，尤其是图像，进行各种视觉效果处理。这个属性引入了一套丰富的滤镜功能，使得网页设计者无需依赖额外的图形软件，就能实现类似Photoshop的效果...
在“css样式滤镜实例”中，我们将深入探讨这个主题，了解如何使用滤镜来改变图像、背景乃至整个页面的外观。CSS滤镜主要应用于HTML或SVG元素，它们可以模拟各种图像处理效果，例如模糊、饱和度调整、颜色转换等。 1...
CSS滤镜通常以`filter`属性应用，其语法为： ```css element { filter: function1(function2(...)); } ``` 其中，`element`是你希望应用滤镜的HTML元素，`function1`和`function2`等是不同的滤镜函数。 2. *...
CSS滤镜是一种在Web设计中使用的工具，它允许开发者对网页元素应用视觉效果，比如模糊、阴影、发光等。CSS滤镜是通过filter属性来实现的，这个属性提供了多种不同的视觉效果选项。以下是一些主要的知识点： 1. ...
在本篇文章中，我们将深入探讨15种不同的CSS滤镜效果，并通过实例展示它们的应用。 1. **彩色底片效果**：`filter: sepia(%)` 和 `filter: grayscale(%)` 可以将图像转换为黑白或sepia色调，百分比参数控制转换的...
本篇内容将深入探讨CSS滤镜的不同用法，结合“css滤镜测试样例大全”中的案例，详细解析每个滤镜的功能与应用。 首先，我们来看`alpha`滤镜。这个滤镜主要用于调整元素的透明度，尤其是在处理旧版IE浏览器时非常...
CSS 滤镜详解 CSS 滤镜是一种可以改变 HTML 元素的视觉效果的技术，通过使用滤镜，可以实现各种特殊...在使用 CSS 滤镜时，需要注意浏览器的兼容问题，不同的浏览器对滤镜的支持不同，需要根据不同的浏览器进行调整。
在本“DivCSS网站布局视频教程第9课 CSS滤镜的应用”中，我们将深入探讨CSS滤镜这一强大的视觉效果工具。CSS滤镜允许开发者对网页元素应用各种视觉效果，如模糊、灰度、饱和度调整等，从而为网页增添丰富的动态感和...
在Dreamweaver中，CSS滤镜为网页设计者提供了丰富的视觉效果工具，使得网页元素能够展现出多样化的动态或静态效果。下面将详细解释Dreamweaver中常用的CSS滤镜及其参数。 ### 1. Alpha Alpha滤镜用于实现透明度的...