CSS3滤镜

CSS3滤镜是对图像等图形元素执行视觉效果操作，如模糊，平衡对比度或亮度，色彩饱和度等。
警告：任何版本的Internet Explorer当前均不支持CSS3滤镜效果。较旧的IE版本支持非标准filter属性来创建诸如不透明度之类的效果，但是该功能已被弃用。
filter属性：将滤镜效果应用于元素，该属性按提供的顺序接受一个或多个滤镜功能。（101%意为：可以大于100%）

属性	描述
blur()	模糊效果此函数接受CSS长度值作为定义模糊半径的参数。默认为0px
brightness()	图像亮度 0％到101％；默认为1；不允许使用负值
contrast()	图像对比度使用方法与brightness()类似
drop-shadow()	添加阴影使用方法与box-shadow属性类似。参数：阴影水平偏移，垂直偏移，模糊半径，阴影颜色
grayscale()	图像转换为灰度 0％到100％；默认值0
invert()	反转效果 0％到100％；默认值0；不允许使用负值
opacity()	添加透明度 0％到100％；默认值1
sepia()	将图像转换为棕褐色 0％到100％；默认值0
saturate()	调整饱和度 0％到101％；默认值1

精灵技术

CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
在网页访问中，客户端每需要访问一张图片都会向服务器发送请求，所以，访问的图片数量越多，请求次数也就越多，造成延迟的可能性也就越大。
所以，CSS Sprites技术加速的关键，并不是降低质量，而是减少个次数，当然随之而来的增加内存消耗，CSS Sprites图片繁琐的合成等缺点在网站性能的提升前，也就不足为道了。

制作精灵图遵循原则

精灵图上放的都是小的装饰性质的背景图片，插入图片不能往上放
精灵图的宽度取决于最宽的那个背景
可以横向摆放也可以纵向

CSS 滤镜和精灵技术相关推荐

CSS滤镜和精灵技术
CSS滤镜和精灵技术目录 CSS滤镜和精灵技术一.CSS滤镜(Filters) 二.CSS精灵技术(sprite) 一.CSS滤镜(Filters) CSS3 滤镜是对图像等图形元素执行视觉效果操 ...
CSS基础：精灵技术（sprites）
其实网页在加载的时候每请求一次图片就算一次请求,请求次数过多也会造成服务器压力过大,相应变慢.而精灵图(sprites)技术就算解决这个问题:减少对服务器的请求次数. 为什么减少了图片的请求次数呢?说 ...
html css背景图片精灵技术,HTML入门学习笔记--CSS背景和精灵图(5)
33-背景色彩 1.如何设置标签的背景色彩? 在CSS中有1个background-color:属性, 就是专门用来设置标签的背景色彩的取值: 具体单词 rgb rgba 106进制快捷键: bc ...
前端笔记（9）元素的隐藏与显示，css用户界面样式，vertical-align垂直对齐，溢出文字省略号显示，css精灵技术，过渡，焦点，滑动门，margin负值
css样式表/层叠样式表(7) 元素的隐藏与显示 (1)dispaly显示 (2)visibility可见性 (3)overflow溢出 css用户界面样式鼠标样式cursor 轮廓线outline ...
五、pink老师的学习笔记——CSS精灵技术（sprite)
5. CSS精灵技术(sprite) 重点 5.1 为什么需要精灵技术图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户. 然而,一 ...
CSS精灵技术与字体图标
CSS精灵技术(sprite) 精灵技术产生的背景当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户. 然而,一个网页中往往会应用很多小的背景图像作为修饰,当 ...
CSS常用技巧（元素显示隐藏、用户界面样式、垂直对齐、溢出文字省略号显示、精灵技术、滑动门、margin负值之美和css三角之美）
CSS常用技巧 CSS常用技巧(元素显示隐藏.用户界面样式.垂直对齐.溢出文字省略号显示.精灵技术.滑动门.margin负值之美和css三角之美) 1.元素显示隐藏 1.1display 显示(重点) ...
【CSS】滑动门技术 ( 借助 CSS 精灵技术实现 | 外部标签设置左半部分背景图片 | 内部标签设置右半部分背景图片 | 鼠标经过更换背景 | 代码示例 )
文章目录一.滑动门技术 1.滑动门技术借助 CSS 精灵技术实现 2.外部标签设置左半部分背景图片 3.内部标签设置右半部分背景图片 4.鼠标经过时更换背景二.完整代码示例一.滑动门技术 1.滑 ...
css sprite 按钮,CSS Sprites (CSS 精灵) 技术
CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢 ...

CSS 滤镜和精灵技术

滤镜和精灵技术

CSS3滤镜

精灵技术

制作精灵图遵循原则

CSS 滤镜和精灵技术相关推荐

最新文章

热门文章