天天看点
返回

CSS滤镜和精灵技术

CSS滤镜和精灵技术

目录

    • CSS滤镜和精灵技术
    • 一、CSS滤镜(Filters)
    • 二、CSS精灵技术(sprite)

一、CSS滤镜(Filters)

CSS3 滤镜是对图像等图形元素执行视觉效果操作，如模糊，平衡对比度或亮度， 色彩饱和度等。 可以使用 CSS3 filter 属性将滤镜效果应用于元素，该属性按提供的顺序接受一个 或多个滤镜功能。使用示例如下：

filter: blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | sepia() | saturate() | url();

/注：任何版本的 Internet Explorer 当前均不支持 CSS3 滤镜效果。较旧的 IE 版本支持非标准 filter 属性来创建诸如不透明度之类的效果，但是该功能已被弃用。/

各种效果分别如下

1、模糊效果

像高斯模糊效果这样的 Photoshop 可以使用该 blur()功能应用于元素。 此函数接受 CSS 长度值作为定义模糊半径的参数。较大的值将产生更多的模糊。 如果未提供参数，则使用值 0。

原图如下：

CSS滤镜和精灵技术
<style>
    img{
        width: 500px;
        height: 300px;
        -webkit-filter: blur(5px);   /*-webkit是用来适应于谷歌等浏览器的内核*/
        filter: blur(5px);           /*这句话也必须加上*/    
    }
    p{
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        -webkit-filter: drop-shadow(5px 5px 10px blue);
        filter: drop-shadow(5px 5px 10px blue);
    }
</style>
<body>
    <img src="../image/7.png" alt="图片加载中">
    <hr>
    <p>西安邮电大学</p>
</body>

设置模糊效果之后

CSS滤镜和精灵技术

2、设置图像亮度

brightness()功能可用于设置图像的亮度。值 0%将创建全黑的图像。 而值 100%或 1 使图像不变。 还可以将亮度设置为高于 100％，这样可以使图像更亮。如果未提供参 数，则使用值 1。不允许使用负值。

/注意：75%接受以百分号表示的值（例如）的过滤器函数也接受以十进制表示的值（如 0.75）。如果该值无效，该函数将返回 none 并且将不应用任何滤镜效果。/

-webkit-filter: brightness(150%);    /*百分数也可以用小数表示 */
         filter: brightness(150%);

3、调整图像对比度

contrast()功能用于调整图像的对比度。值 0%将创建全黑的图像。而值 100%或 1 保持图像不变。还允许超过 100％的值，从而提供对比度较低的结果。 如果未提供参数，则使用值 1。

-webkit-filter: contrast(180%);
         filter: contrast(180%);

4、向图像添加阴影

可以使用该 drop-shadow()功能将阴影效果应用于 Photoshop 等图像。此 功能类似于该 box-shadow 属性。

-webkit-filter: drop-shadow(4px 4px 12px red);
        filter: drop-shadow(4px 4px 12px red);

5、将图像转换为灰度

使用 grayscale()功能可以将图像转换为灰度。值 100%完全是灰度。值 0% 保留图像不变。如果未提供参数，则使用值 0。

-webkit-filter: grayscale(100%);
        filter: grayscale(100%);

6、反转效果

可以使用 invert()函数将像 Photoshop 这样的反转效果应用于图像。 100％或 1 的值被完全反转。 值为 0％会使输入保持不变。 0％到 100％之间 的值是效果的线性乘数。 如果未提供参数，则使用值 0。 不允许使用负值。

-webkit-filter: invert(63%);
        filter: invert(63%);

7、对图像应用不透明度

opacity()功能可用于为图像添加透明度。值 0%是完全透明的。100%或 1 保持图像不变。如果未提供参数，则使用值 1。此功能类似于该 opacity 属性。

-webkit-filter: opacity(80%);
        filter: opacity(80%);

8、将棕褐色效果应用于图像

sepia()功能将图像转换为棕褐色。值 100%或者 1 完全是深褐色。值 0% 保留图像不变。如果缺少参数，则使用值 0。（提示：在摄影方面，棕褐色调是一种特殊的处理方法，可以使黑白照片具有较暖 的色调（红棕色），以增强其存档质量）

-webkit-filter: sepia(60%);
        filter: sepia(60%);

9、调整图像的饱和度

saturate()功能可用于调整图像的饱和度。值 0%完全不饱和。值是 100% 保留图像不变。还允许值超过 100％，从而提供超饱和结果。如果缺少参数，则 使用值 1。

/* -webkit-filter: saturate(2);
        filter: saturate(2); */

二、CSS精灵技术(sprite)

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

2、CSS Sprites 的使用：

.bg_sprite{background-image:url(/整图地址); background-repeat:no-repeat}
 #ico1 {width:容器宽度;height:容器高度;background-position:X 坐标 Y 坐标} 
 #ico2 {width:容器宽度;height:容器高度;background-position:X 坐标 Y 坐标} 
 #ico3 {width:容器宽度;height:容器高度;background-position:X 坐标 Y 坐标} 
 .nav {width:容器宽度;height:容器高度;background-position:X 坐标 Y 坐标}

简略写法

#ico1 {
       width:容器宽度;height:容器高度;
       background:url(/整图地址) no-repeat X坐标 Y 坐标;
       }

/其中，X 坐标和 Y 坐标表示原图相对于 ico1 框左上角点的偏移量，即 坐标 0 0 表示背景 图和 ico1 框的左上角点重合/

例如：如下图，将此图片作为背景图片

CSS滤镜和精灵技术
ico {
      width: 16px; 
      height:16px; 
      background: url("bg_sprite.png") no-repeat 0 -234px; 
      }

效果图如下：

CSS滤镜和精灵技术

例如

原图

CSS滤镜和精灵技术
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
.box{
     width: 200px; 
     margin: 0 auto; 
     overflow: hidden; 
     }
.iton{
    width: 43px; 
    margin-left: 10px; 
    height: 44px;
    float: left; 
    background: url(../image/navsprites_hover.gif) no-repeat; 
    }
.span01{ 
    background-position: 0 0; 
    }
.span02{ 
    background-position: -47px 0; 
    }
.span03{ 
    background-position: -91px 0; 
    }
.span01:hover{ 
    background-position: 0 -45px; 
    }
.span02:hover{ 
    background-position: -47px -45px; 
    }
.span03:hover{ 
    background-position: -91px -45px; 
    } 
</style> 
<body>
    <div class="box"> 
        <span class="iton span01">

        </span> <span class="iton span02">

        </span> <span class="iton span03">

        </span> 
    </div> 
</body>
</html>

效果图

CSS滤镜和精灵技术
制作精灵图遵循原则 
1. 精灵图上放的都是小的装饰性质的背景图片，插入图片不能往上放 
2. 精灵图的宽度取决于最宽的那个背景 
3. 可以横向摆放也可以纵向
css
上一篇: 《 Learning and Memorization 》之 LUT -- lookup table
下一篇: Color Convert 技术总结

继续阅读