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
分享到：
相关推荐
CSS滤镜是现代Web设计中一个非常强大的工具，它们允许开发者在不使用任何图像编辑软件的情况下，对网页上的图片和元素应用各种视觉效果。在给定的文件中，提到了一系列的CSS滤镜效果，接下来将对这些滤镜进行详细的...
**CSS滤镜（Filter）详解** CSS滤镜（Filter）是一种强大的工具，它允许...在实际项目中，可以使用在线代码编辑器或本地的`css_filter.chm`帮助文件进行快速查询和参考，以便在需要时查阅具体滤镜属性的详细信息。
### PHP应用实例集锦——投票系统 #### 一、引言 ...本文将基于《PHP应用实例集锦——投票系统》这一资料，...以上就是对《PHP应用实例集锦——投票系统》主要内容的概述与分析，希望能为读者朋友们提供一定的参考价值。
本篇将深入探讨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滤镜的基本用法，还涵盖了一些高级技巧，帮助读者深入理解和应用。 CSS滤镜是Internet Explorer浏览器特有的功能，允许开发者对网页元素进行视觉效果的处理，比如调整颜色、透明度、模糊等。手册...
二、CSS滤镜实例 1. 模糊效果： ```css .element { filter: blur(10px); } ``` 2. 高对比度： ```css .element { filter: contrast(200%); } ``` 3. 添加阴影： ```css .element { filter: drop-...
全套CSS滤镜特效 全套 CSS 滤镜 特效
PostCSS彩色十六进制Alpha 允许您遵循规范在CSS中使用4和8个字符的十六...const postcssColorHexAlpha = require ( 'postcss-color-hex-alpha' ) ; postcss ( [ postcssColorHexAlpha ( /* pluginOptions */ ) ] )
使用Dreamweaver的CSS滤镜，你可以创造出各种动态和静态的视觉特效，提升网页的美观度和用户体验。在实际应用中，结合不同的参数设置，滤镜可以产生无数种组合效果，使得网页设计更加丰富多彩。记住，虽然这些滤镜...
在“css样式滤镜实例”中，我们将深入探讨这个主题，了解如何使用滤镜来改变图像、背景乃至整个页面的外观。CSS滤镜主要应用于HTML或SVG元素，它们可以模拟各种图像处理效果，例如模糊、饱和度调整、颜色转换等。 1...
这个压缩包“CSS教程-CSS样式CSS滤镜”包含了关于CSS样式的深入学习资料，特别是CSS滤镜的使用，对于想要提升网页视觉效果的设计师来说，是非常宝贵的资源。 CSS样式是控制网页元素显示的关键，通过选择器（如类名...
本文将深入探讨“css自动生成滤镜效果”的相关知识点，以及如何使用“微软滤镜调配器”这一工具。 一、CSS滤镜概述 CSS滤镜允许开发者对网页元素应用各种视觉效果，如模糊、饱和度调整、色调变化等。它们通常以滤镜...
CSS滤镜通常以`filter`属性应用，其语法为： ```css element { filter: function1(function2(...)); } ``` 其中，`element`是你希望应用滤镜的HTML元素，`function1`和`function2`等是不同的滤镜函数。 2. *...
CSS使用IE滤镜实例
在本篇文章中，我们将深入探讨15种不同的CSS滤镜效果，并通过实例展示它们的应用。 1. **彩色底片效果**：`filter: sepia(%)` 和 `filter: grayscale(%)` 可以将图像转换为黑白或sepia色调，百分比参数控制转换的...
总结一下，这个压缩包提供的实例将教你如何使用JavaScript来实现各种按钮特效，包括但不限于事件处理、CSS3动画以及可能的jQuery应用。这些技能对于提升网页交互性和用户体验至关重要，对于前端开发者来说是必不可少...