CSSを使って画像を加工して「ピクセル風」にすることもできます！

写真を「擬似ピクセル スタイル」にするにはどうすればよいですか?この記事ではCSSを使って画像を加工して「ピクセル風」に変換する方法をご紹介しますので、ぜひ参考にしてください。

#ピクセル スタイルとは何ですか?

ピクセル スタイル は、ペイント##を含むがこれに限定されない、作成の基本単位として固定サイズの単色のピクセル正方形を使用するの一種です。 #,Architecture, Game はさまざまな分野のアート スタイルです。 最もよく知られているのは、もちろん初期の ビデオ ゲームのピクセル グラフィックです~

[初期の赤と白の「マリオ」コンソール ピクセル イメージ]

もちろん、初期のビデオ ゲームでは

ピクセル スタイル

が採用されていましたが、これは実際には歴史的な無力さでした。ハードウェア条件の制限により、ゲーム開発者はこの

強力な流動性#を選択せざるを得ませんでした。 ##、パフォーマンスのオーバーヘッド 低いアート スタイル。 しかし、今日ピクセル スタイルは今でもさまざまな分野で人気があり、

美的

やレトロといった意味が与えられています。 アイデア分析まずは今回加工する「恋愛絵」の元画像を見てください:

[恋愛絵]

そのような画像をピクセルに変換するために、最初のアイデアが頭に浮かびました:
アイデア 1: キャンバスを切り取って塗りつぶす

キャンバスを使用して画像を N*N に切り取るはい、このアイデアは間違いなく問題を迅速かつ柔軟に解決できます。

しかし、この方法では、CSS を使用せずに、同僚 Ayang の

初デート

は完全に台無しになってしまいませんか?

❌❌
いやいやいや！考えを変えて CSS を使用して実装する必要があります。 (推奨される学習: css ビデオ チュートリアル )

アイデア 2: 大きな半径のガウスぼかしフィルターを使用して中央値を取得する 主なアイデアは次のとおりです:

画像を N 個の div に分割します。各 div は画像の一部を保持します。

• 各 div は css フィルターに 1 回渡されます

  ぼかし (ガウスぼかし)
、視覚的に実現
• 中央値を取得して div を塗りつぶします

  効果。 このアイデアによると、実際には問題が 1 つだけあります。

  各 div に画像の一部を保持させるにはどうすればよいでしょうか?

ああ、これは私にとって問題ではありません 私は同僚を助けたいという大きな心を持っています。

実装実際には難しくありません:

まず、8*8 を使用して div を 64 の部分に分割します。これは間違いなくグリッドです。レイアウト。

コード:

<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(&#39;.mask-group&#39;)
    for(let i = 0; i< 64; i++) {
      const itemEl = document.createElement(&#39;div&#39;)
      itemEl.className = &#39;mask-item&#39;
      el.appendChild(itemEl)
    }
  }
</script>

次に、各 .mask-item 要素の背景にハートの形を設定します。

• すると、結果

  は次のようになります
。各画像の背景は左上隅から始まるため、期待に応えられません。

次: 次の文を JS トラバーサルに挿入する必要があります:

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

このコード行の機能は、各 .mask-item を与えることです。要素には個別に

background-position

スタイルが割り当てられ、すべての .mask-item 要素の背景画像の左上隅が

座標点

と重なるように計算されます。 効果は次のとおりです:

3. 間隔とガウスぼかしを追加します。 このアイデアによれば、効果を実現するには、interval

を div に追加し、次に

Gaussian Blur

を追加するだけです。 したがって、コードは次のようになります: <pre class="brush:css;toolbar:false;">.mask-group { /* 以下为新增 */ grid-row-gap: 2px; grid-column-gap: 2px; } .mask-item { /* 以下为新增 */ filter: blur(8px) }</pre> しかし、結果は次のようになります:

何が問題なのでしょうか?

ガウスブラー

は、実際には、

インナーボックス
の外側の領域に影響を与えます。 ！ mask-image 表示領域を制限する

#まさか、ガウスぼかし効果の範囲を制限するには、mask-image を使用するしかありません。
4. まず、16*16 ピクセルの純黒の all-black.png ファイルを作成します。
コードは次のとおりです:

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

レンダリング:

おい、今はこんな感じだけど

Gauss のせいで ## なぜなら# の場合、色はかなり明るくなりますが、大丈夫です。微調整してください。

色の調整

コードは次のとおりです:

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



大功告成！！

故事结局

万万没想到，同事阿洋还是没能完成和产品妹妹小美的约会。
原因居然是：
产品妹妹觉得我写代码的样子过于靓仔，非要和我约会!



--全剧终--

（学习视频分享：web前端）

以上がCSSを使って画像を加工して「ピクセル風」にすることもできます！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。