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`帮助文件进行快速查询和参考，以便在需要时查阅具体滤镜属性的详细信息。
### PHP应用实例集锦——投票系统 #### 一、引言 ...本文将基于《PHP应用实例集锦——投票系统》这一资料，...以上就是对《PHP应用实例集锦——投票系统》主要内容的概述与分析，希望能为读者朋友们提供一定的参考价值。
本篇将深入探讨CSS滤镜的应用，包括其基本概念、语法以及在实际项目中的实例解析。 一、CSS滤镜的基本概念 CSS滤镜（Filter）是CSS3引入的一项特性，用于对元素内容进行图像处理。它们可以应用在图像、视频、SVG...
本笔记主要介绍了DIV+CSS的基本概念和应用，涵盖了DIV的介绍、CSS的基本语法、CSS的分类、使用CSS统一网站风格、使用滤镜等内容。 DIV+CSS是什么？ ---------------- DIV是HTML中的一个元素，用于存放HTML元素、...
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`, ... 是一系列的...
CSS滤镜通常以`filter`属性应用，其语法为： ```css element { filter: function1(function2(...)); } ``` 其中，`element`是你希望应用滤镜的HTML元素，`function1`和`function2`等是不同的滤镜函数。 2. *...
CSS滤镜是一种在Web设计中使用的工具，它允许开发者对网页元素应用视觉效果，比如模糊、阴影、发光等。CSS滤镜是通过filter属性来实现的，这个属性提供了多种不同的视觉效果选项。以下是一些主要的知识点： 1. ...
CSS 滤镜详解 CSS 滤镜是一种可以改变 HTML 元素的视觉效果的技术，通过使用滤镜，可以实现各种特殊...在使用 CSS 滤镜时，需要注意浏览器的兼容问题，不同的浏览器对滤镜的支持不同，需要根据不同的浏览器进行调整。
在本“DivCSS网站布局视频教程第9课 CSS滤镜的应用”中，我们将深入探讨CSS滤镜这一强大的视觉效果工具。CSS滤镜允许开发者对网页元素应用各种视觉效果，如模糊、灰度、饱和度调整等，从而为网页增添丰富的动态感和...
在Dreamweaver中，CSS滤镜为网页设计者提供了丰富的视觉效果工具，使得网页元素能够展现出多样化的动态或静态效果。下面将详细解释Dreamweaver中常用的CSS滤镜及其参数。 ### 1. Alpha Alpha滤镜用于实现透明度的...