茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合

    <s id="ddbnn"></s>
  • <sub id="ddbnn"><ol id="ddbnn"></ol></sub>

  • <legend id="ddbnn"></legend><s id="ddbnn"></s>

    讓網(wǎng)站圖片生成灰色效果的三種方法
    來(lái)源:易賢網(wǎng) 閱讀:1537 次 日期:2014-05-15 21:42:21
    溫馨提示:易賢網(wǎng)小編為您整理了“讓網(wǎng)站圖片生成灰色效果的三種方法”,方便廣大網(wǎng)友查閱!

    我一直喜歡灰度圖像因?yàn)槲艺J(rèn)為他們看起來(lái)更有藝術(shù)感。很多圖片編輯如Photoshop很容易把你的彩色圖像變成灰度。甚至有選擇調(diào)整顏色深度和色調(diào)。不幸的是,這樣的效果想做在網(wǎng)絡(luò)上并不容易,因?yàn)闉g覽器有差異。

    1、CSSFilter

    使用CSS過(guò)濾器屬性可能是最簡(jiǎn)單的方法把圖像變成灰度。以往,IE瀏覽器有一個(gè)專(zhuān)有的CSS屬性稱(chēng)為過(guò)濾應(yīng)用自定義效果包括灰度。

    現(xiàn)在,過(guò)濾器屬性是CSS3規(guī)范的一部分,并支持在一些瀏覽器,Firefox、Chrome和Safari。以前,我們也提到Webkit過(guò)濾器,它不僅將圖像變成灰色也可以變成褐色和模糊效果。

    添加如下CSS樣式可以將圖像變成灰色

    代碼如下:

    img{

    -webkit-filter:grayscale(1);/*Webkit*/

    filter:gray;/*IE6-9*/

    filter:grayscale(1);/*W3C*/

    }

    支持IE6-9和Webkit瀏覽器(Chrome18+,Safari6.0+,andOpera15+)

    (注意:這段代碼在Firefox上無(wú)效果。)

    2、Javascript

    第二種方法是通過(guò)使用JavaScript技術(shù)上應(yīng)該支持所有JavaScript的瀏覽器,包括IE6以下

    代碼如下:

    varimgObj=document.getElementById('js-image');

    functiongray(imgObj){

    varcanvas=document.createElement('canvas');

    varcanvasContext=canvas.getContext('2d');

    varimgW=imgObj.width;

    varimgH=imgObj.height;

    canvas.width=imgW;

    canvas.height=imgH;

    canvasContext.drawImage(imgObj,0,0);

    varimgPixels=canvasContext.getImageData(0,0,imgW,imgH);

    for(vary=0;y<imgPixels.height;y++){

    for(varx=0;x<imgPixels.width;x++){

    vari=(y*4)*imgPixels.width+x*4;

    varavg=(imgPixels.data[i]+imgPixels.data[i+1]+imgPixels.data[i+2])/3;

    imgPixels.data[i]=avg;

    imgPixels.data[i+1]=avg;

    imgPixels.data[i+2]=avg;

    }

    }

    canvasContext.putImageData(imgPixels,0,0,0,0,imgPixels.width,imgPixels.height);

    returncanvas.toDataURL();

    }

    imgObj.src=gray(imgObj);

    3、SVG

    第三種方法來(lái)自SVGFilter.,你需要?jiǎng)?chuàng)建一個(gè)SVG文件,并將以下代碼寫(xiě)在里面,保存命名為***.svg

    代碼如下:

    <svgxmlns="http://www.w3.org/2000/svg">

    <filterid="grayscale">

    <feColorMatrixtype="matrix"values="0.33330.33330.3333000.33330.33330.3333000.33330.33330.33330000010"/>

    </filter>

    </svg>

    然后利用過(guò)濾器的屬性,我們可以通過(guò)SVG文件中的元素的ID連接SVG文件

    代碼如下:

    img{

    filter:url('img/gray.svg#grayscale');

    }

    你也可以把它放到CSS文件中,例如:

    代碼如下:

    img{

    filter:url('url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale");')

    }

    總結(jié)

    為了能過(guò)跨瀏覽器支持灰度的效果,我們可以把上述方法和一起使用下面的代碼片段去實(shí)現(xiàn)。這段代碼將支持Firefox3.5+,Opera15+,Safari,Chrome,andIE

    代碼如下:

    img{

    -webkit-filter:grayscale(100%);

    -webkit-filter:grayscale(1);

    filter:grayscale(100%);

    filter:url('../img/gray.svg#grayscale');

    filter:gray;

    }

    我們可以利用上面的代碼和JavaScript方法和只提供CSS濾波器作為后備以防JavaScript被禁用。這個(gè)想法可以很容易地Modernizr的幫助下實(shí)現(xiàn)的。

    代碼如下:

    .no-jsimg{

    -webkit-filter:grayscale(100%);

    -webkit-filter:grayscale(1);

    filter:grayscale(100%);

    filter:url('../img/gray.svg#grayscale');

    filter:gray;

    }

    OK了,你的瀏覽器上可以看到很炫的效果了?。?/p>

    更多信息請(qǐng)查看IT技術(shù)專(zhuān)欄

    更多信息請(qǐng)查看網(wǎng)頁(yè)制作
    易賢網(wǎng)手機(jī)網(wǎng)站地址:讓網(wǎng)站圖片生成灰色效果的三種方法
    由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢(xún)回復(fù)僅供參考,敬請(qǐng)考生以權(quán)威部門(mén)公布的正式信息和咨詢(xún)?yōu)闇?zhǔn)!
    相關(guān)閱讀網(wǎng)頁(yè)制作

    2026國(guó)考·省考課程試聽(tīng)報(bào)名

    • 報(bào)班類(lèi)型
    • 姓名
    • 手機(jī)號(hào)
    • 驗(yàn)證碼
    關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡(jiǎn)要咨詢(xún) | 簡(jiǎn)要咨詢(xún)須知 | 新媒體/短視頻平臺(tái) | 手機(jī)站點(diǎn) | 投訴建議
    工業(yè)和信息化部備案號(hào):滇ICP備2023014141號(hào)-1 云南省教育廳備案號(hào):云教ICP備0901021 滇公網(wǎng)安備53010202001879號(hào) 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號(hào)
    云南網(wǎng)警備案專(zhuān)用圖標(biāo)
    聯(lián)系電話(huà):0871-65099533/13759567129 獲取招聘考試信息及咨詢(xún)關(guān)注公眾號(hào):hfpxwx
    咨詢(xún)QQ:1093837350(9:00—18:00)版權(quán)所有:易賢網(wǎng)
    云南網(wǎng)警報(bào)警專(zhuān)用圖標(biāo)