19,CSS 滤镜
1.Filter 属性介绍
2.Alpha 滤镜的使用
3.Blur 滤镜的使用
4.Filph、Filpv 滤镜
5.DropShadow 滤镜
6.Glow 滤镜
7.Gray ,Invert,Xray 滤镜
8.Shadow 滤镜
1 19.1 F Fr ilter 属性介绍
设置或检索对象所应用的滤镜或滤镜集合。此属性仅作用于有布局的对象，如块对象。
内联要素要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属
性为 absolute，或者设定 display 属性为 block。请参阅对象的 hasLayout 属性。若要在
img 对象上应用 shadow 滤镜，可以在该对象 img 对象的父容器上应用。滤镜的机制是可扩
展的。通过利用 Microsoft® DirectX® Media SDK，你可以使用 C++开发和使用第三方滤镜 。
该属性在 MAC 平台上不可用。对应的脚本特性为 filter。
2 19.2 a Alpha 滤镜的使用
属性 值 说明
opacity 0-100 对象的亮度
style 1,2,3 滤镜的样式
2 19.2 r Blur 滤镜的使用
属性 值 说明
add true/false 是否印象派
direction 0-360 角度
strength 数字 模糊度
3 19.3 Fliph 、 Flipv 滤镜
属性 值 说明
无
4 19.4 w DropShadow 滤镜
属性 值 说明
color 颜色 阴影颜色
offx 数字 x 坐标偏移
offy 数字 y 坐标偏移
positive true/false 是否建立透明
19.5 5 w Glow 滤镜
属性 值 说明
color 颜色 发光颜色
strength 数字 发光厚度
6 19.6 y Gray y ,Invert,Xray 滤镜
属性 值 说明
无
7 19.7 w Shadow 滤镜
属性 值 说明
color 颜色 阴影颜色
direction 0-360 阴影方向
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
div{
background: orange;
width:200px;
height:150px；
}
img{
filter: alpha(style=2,opacity=70);
} </style>
</head> <body>
<div>滤镜的使用</div>
<img src="data:images/pic7.jpg"/> </body>
</html>
19,CSS 滤镜的更多相关文章
- 让less编译通过css滤镜
写IE6 hack的时候,发现在less中直接写css滤镜是会报错的,不能编译通过. 解决方法为:用~“”把相关的css代码包裹起来,例如: _top:~"expression(docume ...
- CSS 滤镜（IE浏览器专属其他浏览器不支持）
Filter 属性介绍: 设置或检索对象所应用的滤镜或滤镜集合.此属性仅作用于有布局的对象,如块对象.内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 positi ...
- 你所不知道的 CSS 滤镜技巧与细节
承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! OK,下面直接进入正文.本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE ...
- 运用HTML5+CSS3和CSS滤镜做的精美的登录界面
原始出处http://chenjinfei.blog.51cto.com/2965201/774865 <!DOCTYPE HTML> <html> <head> ...
- 利用Js或Css滤镜实现IE6中PNG图片半透明效果 IE6PNG妥妥的
接下来介绍几种PNG图片在IE6中不透明的解决办法 1.用自己的PNG,让IE6一边去吧 首先制作PNG图片的时候,另存为一个GIF图片,因为IE6是支持GIF图片透明,然后在css定义 .pngte ...
- CSS 滤镜技巧与细节
本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! 注意:ie不兼容 本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE 系列时代的滤镜,话不多说,直接开车,语法如下: { ...
- 哀悼疫情，全站灰色如何实现，CSS滤镜一行代码实现
庚子清明,以国家之名哀悼,以国家之名哀悼在新冠肺炎疫情中牺牲的烈士和逝世的同胞! 向抗疫英雄致敬! 今日打开各样的app,各大电商,爱奇艺都是灰色的 这里我也一直很好奇该功能,前端如何实现,了解过后发 ...
- WebRTC与CSS滤镜（CSS filter）
我们知道了如何使用WebRTC打开摄像头,可以截取视频帧并且用canvas显示出来. 本文将滤镜与视频结合.给视频加上一层滤镜.主要使用到的是filter属性. canvas与滤镜 先来看filter ...
- CSS滤镜
Filter属性介绍 Alpha滤镜的使用 Blur滤镜的使用 Filph.Filpv滤镜 DropShadow滤镜 Glow 滤镜 Gray ,Invert,Xray 滤镜 Shadow滤镜 19. ...
随机推荐
- Python_小学口算题库生成器
import random import os import tkinter import tkinter.ttk from docx import Document columnsNumber = ...
- TSL1401线性CCD TM32F103开发平台移植源代码
Technorati Tags: stm32 模块资料 对于线性CCD而言,开发着更多的是基于飞思卡尔系列单片机进行开发,前几天在做项目的时候需要用到该传感器,故使用了蓝宙CCD的驱动历程,然后对蓝宙 ...
- YII框架视图模块化
在实际项目开发中,有很多地方我们在不同页面我们会重复利用它,如菜单栏... 下面是将这类型进行模块化处理,使其能在不同页面中重复利用... 案例: 效果图如下: 1.在YII中的路径如下: 2.在le ...
- ViewDragHelper实战 自己打造Drawerlayout
转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/47396187: 本文出自:[张鸿洋的博客] 一.概述 中间拖了蛮长时间了,在上 ...
- anguments
anguments是一个对象,长得很像数组的对象,但不是数组,而是伪数组. arguments的内容是函数运行时的实参列表 (function(d, e, f) { console.log(argum ...
- Pandas的函数应用、层级索引、统计计算
1.Pandas的函数应用 1.apply 和 applymap 1. 可直接使用NumPy的函数 示例代码: # Numpy ufunc 函数 df = pd.DataFrame(np.random ...
- 学习Javascript数据结构与算法（第2版）笔记（1）
第 1 章 JavaScript简介 使用 Node.js 搭建 Web 服务器 npm install http-server -g http-server JavaScript 的类型有数字.字符 ...
- Oracle中的decode()函数
一.decode()函数 1.语法 DECODE(control_value,value1,result1[,value2,result2-][,default_result]); control _ ...
- 用ASP.NET Core 2.0 建立规范的 REST API -- GET 和 POST
本文所需的一些预备知识可以看这里: http://www.cnblogs.com/cgzl/p/9010978.html 和 http://www.cnblogs.com/cgzl/p/9019314 ...
- BZOJ_1925_[Sdoi2010]地精部落_递推
BZOJ_1925_[Sdoi2010]地精部落_递推 Description 传说很久以前,大地上居住着一种神秘的生物:地精. 地精喜欢住在连绵不绝的山脉中.具体地说,一座长度为 N 的山脉 H可分 ...