文档章节

CSS3的滤镜效果(-webkit-filter)

Rickxue
 Rickxue
发布于 2015/11/23 10:35
字数 419
阅读 13
收藏 0

    -webkit-filter是css3的一个属性,它能通过通过设定不同属性,来做到不用ps就能做到:高斯模糊,调整灰度值,对比度,亮度等等效果。这样对于一张图片,如果你希望因为不同的状态而想要得到这张图片的不同图片效果的话,就不用再另外做一张图片,来进行两张图片之间的相互转换。通过一个css3属性就能完成。

    通过-webkit-filter的滤镜效果,对图片来进行效果控制,对页面浏览性能,效果变换性能都有很大的提升。

   -webkit-filter:现在规范中支持的效果有:

  • grayscale 灰度               值为0-1之间的小数 

  • sepia 褐色         值为0-1之间的小数

  • saturate 饱和度     值为num

  • hue-rotate 色相旋转  值为angle(deg)

  • invert 反色        值为0-1之间的小数

  • opacity 透明度     值为0-1之间的小数

  • brightness 亮度     值为0-1之间的小数

  • contrast 对比度     值为num

  • blur 模糊           值为length

  • drop-shadow 阴影

 这里展示下阴影的效果,其他效果可自己尝试!

  -webkit-filter:drop-shadow(10px 10px 10px #000)

© 著作权归作者所有

共有 人打赏支持
Rickxue
粉丝 5
博文 43
码字总数 16647
作品 0
程序员
私信 提问
Css3 filter图片处理

CSS3 增加了filter,即过滤功能,此功能非IE得filter 我想光看上面的效果就能吸引你了,要是你自己动手的话,我想您更会感到神奇。细一看,这些效果就像是photoshop整出来的一样,其实是真是...

IamOkay
2015/08/08
0
0
-webkit-filter用法

这些滤镜效果最初是用于SVG的,W3C引入到CSS中,然后制定了CSS Filter Effects 1.0,现在webkit率先支持了它。 现在规范中支持的效果有: grayscale 灰度 sepia 褐色 saturate 饱和度 hue-ro...

小潜水艇
2013/12/07
0
0
CSS实现跨浏览器兼容性的盒阴影效果

CSS实现跨浏览器兼容性的盒阴影效果 一、无关紧要碎碎念 在web页面的ui表现中,投影效果可以说是非常常见的一种表现效果了。例如开心网的头像修饰效果: 然而,在CSS2的时代,我们多半使用图...

0000001
2011/11/29
0
0
深入CSS3 动画效果的总结详解

CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript。CSS3动画的属性主要分为三类:transform、transition以及animation。 transform ...

mjx陌上花开
2014/04/07
0
0
CSS3实现背景颜色渐变 摘抄

一. Webkit浏览器 (1) 第一种写法: background:-webkit-gradient(linear ,10% 10%,100% 100%, color-stop(0.14,rgb(255,0,0)), color-stop(0.5,rgb(255,255,0)), color-stop(1,rgb(0,0,25......

上赶的大老鼠
2013/12/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

MIT 6.828 main.c文件分析

#include <inc/x86.h>#include <inc/elf.h> /*这是一个简单粗略的boot loader,它唯一的工作就是从硬盘的第一个扇区启动格式为ELF的内核镜像硬盘布局这个程序(包括boot.S和mai...

FeanLau
1分钟前
0
0
SpringBoot 整合 Redis

1. pom.xml 文件中添加 Redis 依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId><exclusions><exclusio......

北漂的我
9分钟前
0
0
TechDay实录 | 认识PaddlePaddle:更低使用成本、更高开发效率的深度学习框架

导读: 在人工智能时代,各行各业都在尝试利用机器学习/深度学习等前沿技术来解决自身的业务需求,深度学习框架也应运而生。为了继续帮助AI开发者们在深度学习的道路上快速升级,百度PaddleP...

PaddleWeekly
10分钟前
3
0
JAVA AES加解密服务

package com.pasenger.aes;import lombok.Data;import org.apache.commons.codec.binary.Base64;import org.springframework.beans.factory.InitializingBean;import org.springframewo......

Pasenger
21分钟前
0
0
SpringCloud集成 Mybatis分表插件shardbatis 踩坑日志及其原理分析

公司新开发的系统数据量过大,需要进行分表处理,我在网上浏览一圈,选中了Shardbatis,原因有二: 1.公司项目本身集成了Mybatis,而Shardbatis是其插件,引入方便; 2.Sharbatis十分轻便,只...

L墨龙
28分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部