天天看點
傳回

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 技術總結

繼續閱讀