CSS filter属性

CSS filter属性
一,使用范围;
   Filter属性 主要是运用在图片上,实现一些特效。
二,常用属性(默认值是none);
    A,grayscale灰度:
        1,使用这个特效,会把图片变成灰色的,也就是说你的图片将只有两种颜色“黑色”和“白色;
        2,默认值:100%,
        如果你在grayscale()中没有任何参数值,将会以“100%”渲染

B,sepia褐色(求专业指点翻译)
        1,褐色,使用这种效果,你的图片好像很古老的一样
        2,sepia()中没有任参数值,将会以“100%”渲染

C,saturate饱和度
        1,saturat是用来改变图片的饱和度
        2,默认值:100%,
    D,hue-rotate色相旋转
        1,hue-rotate用来改变图片的色相
        2,默认值:0deg
    E,invert反色
        1,invert做出来的效果就像是我们照相机底面的效果一样
        2,默认值:100%
    F,opacity透明度
        1,改变图片的透明度
        2,默认值:100%
    G,brightness亮度
        1,改变图片的亮度
        2,默认值:100%
    contrast对比度
        1,改变图片的对比度
        2,默认值:100%
    blur模糊
        1,改变图片的清晰度
        2,默认值:0
    drop-shadow阴影
        1,像box-shadow一样的效果,给图片加阴影效果
        2,写法::drop-shadow(5px 5px 5px #ccc);

时间: 2024-10-05 09:49:13

CSS filter属性的相关文章

css中filter属性的用法

转:http://www.cr173.com/html/7817_1.html filter:filtername(parameters)即 filter:滤镜名(参数) 其中,filter是滤镜选择符:filtername是滤镜的属性名,这里包括alpha.blur.chroma等 多种属性:parameters是属性参数值.属性名及参数值请看下面的<filter属性及属性值>. alpha:设置透明层次 blur:创建高速度移动效果,即模糊效果 chroma:制作专用颜色透明 DropSh

CSS中filter属性的使用

filter 属性定义了元素的可视效果 blur 给图像设置高斯模糊."radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊. 如果没有设定值,则默认是0:这个参数可设置css长度值,但不接受百分比值. body { background-color: #000; color: skyblue; } div { border: 1px solid #fff; padding: 10px; width: 610px; margin: 10px; }

CSS透明属性详解代码_CSS/HTML

本文介绍一下关于CSS透明属性详解及背景透明继承解决办法hack,如果你在使用css透明背景之类的此文章可帮你解决许多不兼容问题 透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码: 代码如下: .transparent_class {filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;} 上面的几个属性分别是:opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性

浏览器css透明属性opacity

大家知道css opacity属性背景透明是常有的事,发现有时候居然存在浏览器不兼容问题,后经过查找尝试发现如下能使浏览器兼容不再有问题.有兼容问题的不妨一试. <!DOCTYPE html>  <html>  <head>  <meta charset="utf-8" />  <title>半透明演示Demo</title>  <style>  .div-a{ background:url(28674

【转载】CSS direction属性简介与实际应用

文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=5302 一.用的少并不代表没有用 至少,在我接触的这么多项目里,没有见到使用过CSS direction属性做实际开发的. 为什么呢?是因为direction长得丑吗? 虽然说direction确实其貌不扬,但是CSS并不是一个看脸卖萌的世界. 那是因为兼容性吗? 那更不是了,在那个“美女”确实是美

CSS position 属性

实例 定位 h2 元素: h2 { position:absolute; left:100px; top:150px; } 亲自试一试 浏览器支持 IE Firefox Chrome Safari Opera           所有主流浏览器都支持 position 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit". 定义和用法 position 属性规定元素的定位类型. 说明 这个属性定义建立元素布局所用的定位机制.

CSS z-index 属性的使用方法和层级树的概念

CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也未必能将节点显示在最前面. 本文将通过一些例子对 z-index 的使用方法进行分析, 并且为各位带入 z-index 层级树的概念. 顺序规则 如果不对节点设定 position 属性, 位于文档流后面的节点会遮盖前面的节点. 定位规则 如果将 positio

#学习记录#——CSS content 属性

CSS content 属性常结合:before 和:after 这两个伪类一起使用,给指定的元素添加内容来丰富页面. 1. 添加文本内容 html: <h1>给末尾添加内容. </h1> <h2>给末尾不添加内容. </h2> css: <style> h1:after{ content: “hello world!!” } h2:after{ content: none } </style> 所要添加的内容用双引号引起来,若不添加

CSS重要属性之float学习心得

我们来看看CSS重要属性--float. 以下内容分为如下小节: 1:float属性 2:float属性的特性     2.1:float之文字环绕效果 2.2:float之父元素高度塌陷 3:清除浮动的方法 3.1:html法 3.2:css伪元素法 4:float去空格化 5:float元素块状化 6:float流体布局     6.1:单侧固定 6.2:DOM与显示位置不同的单侧固定 6.3:DOM与显示位置相同的单侧固定 6.4:智能布局 1:float属性 float,顾名思义是漂浮,