如何利用CSS處理圖片轉(zhuǎn)為像素風(fēng)

小編給大家分享一下如何利用CSS處理圖片轉(zhuǎn)為像素風(fēng)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

什么是像素風(fēng)？

像素風(fēng)是一種以固定大小純色像素方塊作為基本單元，進(jìn)行創(chuàng)作，包含但不限于繪畫、建筑、游戲更各個(gè)領(lǐng)域的一種美術(shù)風(fēng)格。
其中最讓人耳熟能詳?shù)?，?dāng)然是早期電子游戲的像素畫面啦~

[早期紅白機(jī)上"馬里奧"的像素形象]

當(dāng)然，早期電子游戲采用像素風(fēng)，實(shí)際上是一種歷史的無(wú)奈，硬件條件的限制，讓游戲開發(fā)者不得不選擇這種變現(xiàn)力強(qiáng)，性能開銷低的美術(shù)風(fēng)格。

不過(guò)，時(shí)至今日像素風(fēng)在各個(gè)領(lǐng)域依然潮流，則被賦予了更多審美和復(fù)古上的意義。

思路分析

先看看本次要處理的“愛(ài)心圖”的原圖：

[愛(ài)心圖]

要將一張這樣的圖片變成像素，我腦海里首先蹦出了第一個(gè)思路：

思路一：通過(guò)canvas切割和填充

使用canvas將圖片切割成N*N塊，然后每塊區(qū)域單獨(dú)計(jì)算取色彩中值，并將其填充為實(shí)色，沒(méi)錯(cuò)，這個(gè)思路無(wú)疑是可以很快且靈活的解決問(wèn)題的。
但這樣一來(lái)，沒(méi)使用到CSS，同事阿洋的第一次約會(huì)豈不是就完全泡湯了？
??
不行不行！我得換個(gè)思路，用CSS來(lái)實(shí)現(xiàn)！

思路二：大半徑高斯模糊濾鏡來(lái)取中值

主體思路如下：

• 將圖片分成N個(gè)div，每個(gè)div都持有圖片的一部分。

• 每個(gè)div都通過(guò)css-filter來(lái)進(jìn)行一次blur(高斯模糊)，視覺(jué)上達(dá)到取中值并填充div的效果。

按這個(gè)思路，其實(shí)只有一個(gè)難點(diǎn)，如何讓每個(gè)div都持有圖片的一部分？

呵，這可難不倒我那顆幫助同事大心臟。

實(shí)施

其實(shí)不難：

• 首先，我們用8*8將一個(gè)div分成64份，毫無(wú)疑問(wèn)的grid布局。

代碼：

<style>
    .mask-group {
      width: 128px;
      height: 128px;
      display: grid;
      grid-template-columns: repeat(8,1fr);
      grid-template-rows: repeat(8,1fr);
    }
</style>
<script>
  const el = document.querySelector('.mask-group')
    for(let i = 0; i< 64; i++) {
      const itemEl = document.createElement('div')
      itemEl.className = 'mask-item'
      el.appendChild(itemEl)
    }
  }
</script>

• 然后我們給每個(gè).mask-item 元素設(shè)置一個(gè)心形背景

然后效果就變成了這樣，因?yàn)槊恳粡埖谋尘岸际菑淖笊辖情_始的，因此肯定不符合預(yù)期。

接下來(lái)：我們需要在js的遍歷中插入這么一句：

itemEl.style.backgroundPosition = `-${Math.floor(i%8) * 16}px -${Math.floor(i/8) * 16}px `

這行代碼的作用，是給每一個(gè).mask-item元素單獨(dú)賦予一個(gè)background-position樣式，通過(guò)計(jì)算讓所有.mask-item元素的背景圖的左上角都重疊到了一個(gè)坐標(biāo)點(diǎn)上。

效果如圖：

3. 增加間隔和高斯模糊 按照設(shè)想，我們只需要給div加上間隔，再給上高斯模糊，就能達(dá)到效果了。 于是代碼如下：

.mask-group {
  /* 以下為新增 */
  grid-row-gap: 2px;
  grid-column-gap: 2px;
}
.mask-item {
  /* 以下為新增 */
  filter: blur(8px)
}

但是效果卻：

到底是哪里出了問(wèn)題？
高斯模糊居然會(huì)作用到inner-box以外的區(qū)域??！

4. mask-image 限定可視區(qū)域

沒(méi)辦法，為了限定高斯模糊的效果區(qū)域，我只能通過(guò)mask-image了。
先弄一張16*16像素的純黑all-black.png文件。
代碼如下：

.mask-item {
  /* 以下為新增 */
  -webkit-mask-image: url('./all-black.png');
  mask-image: url('./all-black.png');  
}

效果圖：

嘿嘿，現(xiàn)在就像那么回事了，不過(guò)因?yàn)楸桓咚?/code>的原因，顏色淡了不少，沒(méi)事，微調(diào)一下即可。

5. 調(diào)整顏色

代碼如下：

.mask-item {
  /* 以下為更改 */
  filter: blur(8px) contrast(400%) saturate(400%);
}

以上是“如何利用CSS處理圖片轉(zhuǎn)為像素風(fēng)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！