web-dev-qa-db-ja.com

CSSで画像をシャープにする方法は？

任意のURL（ローカルまたはリモート）から画像をロードしていて、JavaScriptもサーバー側の処理も使用したくない場合、CSSを使用してクライアント側から画像をシャープにすることはできますか？

imagecssimage-processingclient-side
7
Camilo Martin

はい、一部のブラウザではこれはすでに可能です（ChromeやFirefoxなど）。

特に、 mix-blend-mode および CSSフィルター 。

ここにcodepenがあります 例としてLennaイメージ、およびコードスニペットとしての（コンパイルされた）コピー：

.foo,
.bar,
.bar::after,
.baz {
  width: 512px;
  height: 512px;
  position: absolute;
}
.foo {
  z-index: 1;
  mix-blend-mode: luminosity;
  opacity: 0;
  overflow: hidden;
  -webkit-filter: contrast(1.25);
  filter: contrast(1.25);
}
.foo:hover {
  opacity: 1;
}
.bar,
.bar::after,
.baz {
  background: url(https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_%28test_image%29.png);
}
.bar::after {
  content: '';
  -webkit-filter: blur(4px) invert(1) contrast(0.75);
  filter: blur(4px) invert(1) contrast(0.75);
  mix-blend-mode: overlay;
}
<div class="foo">
  <div class="bar"></div>
</div>
<div class="baz"></div>

画像にカーソルを合わせると、効果が表示されます。パラメータを微調整する（そして、アンシャープマスクの「強度」設定と同様に、opacityを使用して効果を「フェード」する）と、特定のユースケースでより望ましい結果を得るのに役立ちます。

11
Camilo Martin

CSSを使用して縮小された画像をシャープにするハックを見つけました。 Chromeでのみ機能しますが、私の経験からChromeは他のブラウザよりも画像をぼかすようです。これにより、基本的にぼけが「元に戻され」、画像が元の画像のように見えます。レイヤー絶対位置を使用して画像を重ね、image-renderingをpixelatedに設定します。例を次に示します。

画像をシャープにするための奇妙なCSSハック（Chrome 59および60のみ）

1
Ethan