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. ...
随机推荐
- js相关
记录工作中用到的js实用方法: 1. 判断包含:indexOf "https".indexOf("http") 包含结果为0,不包含结果为-1: 通常用(&qu ...
- 第三章之S5PV210串口初始化
1,在start.S中执行373行b lowlevel_init跳转到/board/samsung/goni/lowlevel.S中,此代码中初始化一样硬件. 找到241行,此行执行URAT初始化,如 ...
- tomcat第一次使用正常启动后访问8080端口报404错误
问题:tomcat第一次使用正常启动后访问8080端口报404错误 解决办法:双击tomcat调出tomcat的xml文件页面,Server Locations 默认是选第一行即Use Workspa ...
- SSM-MyBatis-07：Mybatis中SqlSession的insert和delete底层到底做了什么
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 先点进去看一下insert方法 用ctrl加鼠标左键点进去看 发现是一个接口SqlSession的方法,没有实 ...
- 数据库历险记（一） | MySQL这么好，为什么还有人用Oracle？
关系型数据库(Relational DataBase Management System),简称 RDBMS.说起关系型数据库,我们脑海中会立即浮现出 Oracle.MySQL.SQLServer 等 ...
- python爬取网易云周杰伦所有专辑，歌曲，评论，并完成可视化分析
---恢复内容开始--- 去年在网络上有一篇文章特别有名:我分析42万字的歌词,为搞清楚民谣歌手们在唱些什么.这篇文章的作者是我大学的室友,随后网络上出现了各种以为爬取了XXX,发现了XXX为名的文章 ...
- python获取操作系统平台、版本及架构
platform模块提供了底层系统平台的相关信息 系统架构 32位还是64位 >>>import platform >>> platform.architectur ...
- Java Script中常见操作
字符串常见操作:obj.length 长度obj.trim() 移除空白obj.trimLeft()obj.trimRight)obj.charAt(n) 返回字符串中的第n个字符obj.concat ...
- Tensorflow学习-数据读取
Tensorflow数据读取方式主要包括以下三种 Preloaded data:预加载数据 Feeding: 通过Python代码读取或者产生数据,然后给后端 Reading from file: 通 ...
- redis结合自定义注解实现基于方法的注解缓存，及托底缓存的实现
本次分享如何使用redis结合自定义注解实现基于方法的注解缓存,及托底缓存的实现思路 现在的互联网公司大多数都是以Redis作为缓存,使用缓存的优点就不赘述了,写这篇文章的目的就是想帮助同学们如 ...