css滤镜基础教程

2024-09-29 19:51:41

CSS滤镜基础

随着网页设计技术的发展，人们已经不满足于原有的一些HTML标记，而是希望能够为页面添加一些多媒体属性，例如滤镜的和渐变的效果。CSS技术的飞快发展使这些需求成为了现实。从现在开始我要为大家介绍一个新的CSS扩展部分：CSS滤镜属性（Filter Properties)。使用这种技术可以把可视化的滤镜和转换效果添加到一个标准的HTML元素上，例如图片、文本容器、以及其他一些对象。对于滤镜和渐变效果，前者是基础，因为后者就是滤镜效果的不断变化和演示更替。当滤镜和渐变效果结合到一个基本的SCRIPT小程序中后，网页设计者就可以拥有一个建立动态交互文档的强大工具。也就是CSS FILTER+ SCRIPT，这就说明想要建立动态的文档还要一些SCRIPT （脚本语言）的基础。

正常的图片 <img src="flower1.jpg" >

模糊效果处理后的图片，哪个更漂亮，你觉得呢！达到这个效果很容易。仅仅是加了点东东。
<img src="flower1.jpg" style="filter:blur(strength=50)">

自己试试，看看有假没有！不要你用什么Photoshop之类的图象软件，简简单单语法如下：
filter:filtername(parameters) 既 filter:滤镜名称（参数）

可视化滤镜属性只能用在HTML控件元素上。所谓的HTML空间元素就是它们在页面上定义了一个矩形空间，浏览器的窗口可以显示这些空间。下面列出了HTML合法的控件和它们的说明。

备注：可惜只有IE4.0以上支持，如果是别的浏览器，那就.......

元素	说明
BODY	网页文档的主体元素，所有的可见范围都在<BODY>元素内
BUTTON	表单域的按钮，可以有“发送(submit)”、“重置(reset)”等形式
DIV	定义了网页上的一个区域，这个区域的高度、宽度或者绝对位置都是以知的
IMG	图片元素，通过指定“src"属性来指定图片的来源
INPUT	输入表单域
MARQUEE	移动字幕效果
SPAN	定义了网页上的一个区域，这个区域的高度、宽度或者绝对位置都是以知的
TABLE	表格
TD	表格数据单元格
TEXTAREA	文本区域
TFOOT	多行输入文本框
TH	表格标题单元格
THEAD	表格标题
TR	表格行

IE4.0以上支持的滤镜属性表

滤镜效果	描述
Alpha	设置透明度
Blru	建立模糊效果
Chroma	把指定的颜色设置为透明
DropShadow	建立一种偏移的影象轮廓，即投射阴影
FlipH	水平反转
FlipV	垂直反转
Glow	为对象的外边界增加光效
Grayscale	降低图片的彩色度
Invert	将色彩、饱和度以及亮度值完全反转建立底片效果
Light	在一个对象上进行灯光投影
Mask	为一个对象建立透明膜
Shadow	建立一个对象的固体轮廓，即阴影效果
Wave	在X轴和Y轴方向利用正弦波纹打乱图片
Xray	只显示对象的轮廓

css滤镜基础教程

CSS滤镜基础随着网页设计技术的发展,人们已经不满足于原有的一些HTML标记,而是希望能够为页面添加一些多媒体属性,例如滤镜的和渐变的效果.CSS技术的飞快发展使这些需求成为了现实.从现在开始我要为大家介绍一个新的CSS扩展部分:CSS滤镜属性(Filter Properties).使用这种技术可以把可视化的滤镜和转换效果添加到一个标准的HTML元素上,例如图片.文本容器.以及其他一些对象.对于滤镜和渐变效果,前者是基础,因为后者就是滤镜效果的不断变化和演示更替.当滤镜和渐变效果结合到一个基本
AngularJs 60分钟入门基础教程

AngularJs是一个不错的用于开发SPA应用(单页Web应用)的框架.单页Web应用(single page web application,SPA),就是只有一张Web页面的应用.浏览器一开始会加载必需的HTML.CSS和JavaScript,所有的操作都在这张页面上完成,由JavaScript来控制不同view在这个页面上的呈现.本文源于Youtube上一个不错的AngularJs的入门教程视频:AngularJS Fundamentals In 60-ish Minutes,主要讲解了
python基础教程项目三之万能的XML

这个项目的名称与其叫做万能的XML不如叫做自动构建网站,根据一份XML文件,生成对应目录结构的网站,不过只有html还是太过于简单了,如果要是可以连带生成css那就比较强大了.这个有待后续研发,先来研究下怎么html网站结构. 既然是通过XML结构生成网站,那所有的事情都应该由这个XML文件来.先来看下这个XML文件,website.xml: <website> <page name="index" title="Home page"> &l
Webpack基础教程之名词解释

一.概念介绍本质上,webpack 是一个现代JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle. 它是高度可配置的,但是,在开始前你需要先理解四个核心概念: 入口(entry) 输出(output) loader 插件(plugins) 1. 入口(entry) 指定webpack从
Vue全家桶入门基础教程

1. Vue概述 Vue(读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. 渐进式: 声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建可以使用其中的一个或者多个优点: 易用:熟悉HTML,CSS.JavaScript知识后,可快速上手Vue 灵活:在一个库和一套完整框架之间自如伸缩高效:20kB运行大小,超快虚拟DOM 2. Vue的基本使用 2.1 传统开发模式对比 /
Vue基础教程之条件渲染和列表渲染

目录前言 1.1 作用 1.2 控制元素显隐的方式 1.3 初始渲染对比 1.4 切换消耗对比 1.5 使用场景对比 1.6 其他 2 v-if 和 v-for 2.1 v-if 和 v-for 不能同时用的原因 2.2 v-if 和 v-for 一起用的解决方案 3 列表渲染的 key 有什么用总结前言什么是条件渲染?在我们的页面中会有很多这样的应用场景,比如说我们今天要上架一个活动,这个活动页面只在今天有效,在晚上的24点或者说在明天早上凌晨0点1秒的时候就要把这个页面下下来,把这个
vue实例成员插值表达式过滤器基础教程示例详解

目录一. 什么是Vue 二.为什么学Vue 三.如何使用Vue 下载安装? 插值表达式四.vue特点 1.虚拟DOM 2.数据的双向绑定 3.单页面应用 4.数据驱动五.Vue实例六.实例成员 - 挂载点 | el - 自定义插值表达式括号| delimiters - 数据 | data - 过滤器 | filters - 方法 | methods - js对象(即字典)补充 - 插值表达式转义 | delimters - 计算属性 | computed - 监听属性 | watch 一
css滤镜属性语法介绍

css滤镜 Style属性: 可以应用在标签中,更可用广泛应用在<table><tr><td><body> <center><img><input><font><form><frame><label><map>等等标签中, 更重要的是,它可用在标签中. 页面切换效果: 在页面前部与之间加入"" 说明:duration为页面切换的时间长度,3.
Javascript常用运算符(Operators)-javascript基础教程

javascript基础教程算术运算符运算符运算符说明示例示例说明 + 加法 x+y 如果x为整数2,y为整数5, x+y等于7 如果x为字符串"text1", y为字符串"fun", x+y则等于"text1fun" - 减法 x-y * 乘法 x*y / 除法 x/y % 两者相除求余数 x%y 如果x等于10, y等于3, x%y结果等于1 ++ 递增 x++ 如果x等于10, x++等于11 -- 递减 y-- 如果y等于10,
微信小程序开发入门基础教程

微信小程序开发入门基础教程本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果. 开发准备工作获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID . 下载开发工具下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/dow

css滤镜基础教程

相关推荐

随机推荐