`
mrstanglu
  • 浏览: 41161 次
  • 性别: Icon_minigender_2
  • 来自: 郑州
社区版块
存档分类
最新评论

CSS样式的filter(滤镜效果)可控制DIV透明度

阅读更多

我们可以用CSS样式的filter(滤镜效果)对HTML的一些标记设置滤镜效果。

例:

黑白照片 filter: gray;
X光照片 filter: Xray;
风动模糊 filter: blur(add=true,direction=45,strength=30);
正弦波纹 filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3);
半透明效果 filter: Alpha(Opacity=50);
线型透明 filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140);
放射透明 filter: Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=30, StartY=30, FinishX=200, FinishY=200);
白色透明 filter: Chroma(Color=#FFFFFF);
降低色彩 filter: grays;
底片效果 filter: invert;
左右翻转 filter: fliph;
垂直翻转 filter: flipv;
投影效果 filter:progid:dXImageTransform.Microsoft.DropShadow(color=#cccccc,offX=5,offY=5,positives=true);
马赛克 filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=3);
发光效果 filter:progid:dXImageTransform.Microsoft.Glow(color=#cccccc,Strength=5);
柔边效果 filter:alpha(opacity=100, finishOpacity=0,style=2

 

分享到:
评论

相关推荐

    CSS中的Filter样式大全及滤镜兼容问题

    CSS 中的 Filter 样式大全及滤镜兼容问题 本文将详细介绍 CSS 中的 Filter 样式,包括 Filter 样式的定义、应用和种类,以及各种浏览器对 CSS 的支持问题。 一、Filter 样式的定义和应用 Filter 样式是 CSS 样式...

    精品css样式表滤镜速查中文手册.rar

    7. **透明度滤镜**:`filter: opacity()`控制元素的不透明度,实现半透明效果。 8. **混合模式滤镜**:利用`filter: blend-mode`,可以将元素与其他元素或背景进行复杂的色彩混合,创造艺术性的视觉效果。 9. **渐变...

    css滤镜效果实例丛书

    - `Style`: 控制透明度渐变的样式,可选值为1、2或3。 - `StartX`、`StartY`: 起始位置坐标。 - `FinishX`、`FinishY`: 结束位置坐标。 **示例**: ```css div { filter: Alpha(Opacity="0", FinishOpacity="40...

    Dreamwear中CSS滤镜参数

    Alpha滤镜用于实现透明度的变化效果。通过调整参数可以控制图像的透明度以及变化的方向等属性。 - **参数详解**: - `Opacity`:初始透明度值,取值范围为0到100,其中0表示完全透明,100表示不透明。 - `...

    div透明度

    ### div透明度 在网页设计与开发中,调整`div`元素的透明度是一种常见的需求。这不仅可以增强页面的视觉效果,还能实现更多的交互可能性。本文将深入探讨如何通过CSS来设置`div`的透明度,并解释两种常用的方法:`...

    css3 filter的十种特效测试

    CSS3的滤镜(Filter)特性为Web开发者提供了丰富的图像处理功能,允许我们在不借助额外图形软件的情况下,直接在浏览器中对元素进行视觉效果的调整。这篇博客将深入探讨CSS3 Filter的十种特效,结合实例代码和图片...

    使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法

    对于更复杂的布局或交互,可能还需要考虑其他CSS属性,如`opacity`来调整透明度,或者使用`pointer-events: none`让模糊区域不可点击,以不影响交互。同时,由于`filter`属性是相对昂贵的渲染操作,尤其是在移动设备...

    样式表滤镜中文手册(chm)

    在Web开发中,CSS滤镜是一种强大的工具,允许开发者对网页元素的外观进行高级控制,如调整颜色、模糊、旋转、透明度等视觉效果。本手册详细阐述了这一技术,为初学者和有经验的开发者提供了全面的指导。 首先,我们...

    网页制作之css滤镜

    Alpha透明滤镜允许开发者调整元素的透明度,从而实现从不透明到半透明的过渡效果。其基本语法如下: ```css style="filter:Alpha(opacity=value, finishOpacity=value, style=value, startX=value, startY=value, ...

    css 滤镜测试样例大全

    在CSS世界中,滤镜(Filters)是一种强大的工具,它允许开发者对网页元素的视觉表现进行各种修饰,如模糊、颜色调整、透明度变化等。本篇内容将深入探讨CSS滤镜的不同用法,结合“css滤镜测试样例大全”中的案例,...

    div 背景透明度 如何设置一个div的背景透明度

    在传统的CSS 2时代,我们使用filter属性中的alpha滤镜来设置div背景的透明度。这种方式主要用于IE浏览器的兼容性解决方案。 透明度的设置方法主要通过filter属性来实现,具体用法如下: - `filter: alpha(opacity=...

    css样式教材资料下载css样式教材资料下载

    - `alpha(opacity=50)`创建透明渐变效果,`opacity`参数控制透明度。 - `blur(5px)`添加模糊效果,`5px`表示模糊半径。 - `chroma(color)`去除指定颜色,常用于消除背景颜色。 2. **翻转滤镜**:`flipH`和`flipV...

    Css中的filter属性语法说明.

    - `Style`: 指定透明度变化的样式,取值范围为1、2或3。 - `StartX`、`StartY`: 开始位置坐标。 - `FinishX`、`FinishY`: 结束位置坐标。 #### 示例 ```css img { filter: Alpha(Opacity="0", FinishOpacity="40",...

    CSS的filter常用滤波器属性及语句大全

    在CSS的世界里,`filter`属性提供了一种强大的方式来改变元素的视觉效果,通过应用各种图像处理滤镜。在给定的文件信息中,详细列出了多种常用的滤波器属性及其参数设置方法,让我们深入探讨这些滤波器的具体功能与...

    HTML5设置filter图片滤镜代码.zip

    7. **透明度(opacity)**:虽然不是filter属性的一部分,但常与滤镜一起使用,用于调整元素的透明度。例如:`filter: opacity(0.5);` 在JavaScript和jQuery的帮助下,我们可以动态地改变这些滤镜效果,实现更丰富...

    IE滤镜操作(关于IE滤镜效果的一般演示,初级滤镜的学习操作,结合了HTML和Javascript,javascript)

    IE滤镜是一系列特殊的样式属性,允许开发者在不支持CSS3效果的老版IE浏览器中创建动态视觉效果。例如,可以使用滤镜实现透明、阴影、渐变、旋转等效果。 2. **滤镜语法**: 滤镜通常在CSS中通过`filter`属性来...

    CSS样式表.docx

    CSS 滤镜功能是指可以对元素应用特殊效果,如模糊、阴影、透明度等。常见的 CSS 滤镜功能有: * blur:模糊效果 * drop-shadow:阴影效果 * opacity:透明度效果 六、CSS 在实际应用中的优势 CSS 在实际应用中有...

    DivCSS网站布局视频教程第4课 CSS设置图片效果

    在本“DivCSS网站布局视频教程第4课 CSS设置图片效果”中,我们将深入探讨如何利用CSS(层叠样式表)来控制网页中的图像展示,从而实现丰富的视觉效果。CSS作为网页设计的核心技术之一,允许我们对网页元素进行精确...

    ie6 png 透明度 解决方法

    通过在CSS样式表中为PNG图片添加`filter`属性,可以实现透明度兼容。例如: ```css .ie6png { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale'); *zoom: 1; ...

Global site tag (gtag.js) - Google Analytics