Chromium ベースのブラウザでは、background-image として使用される縮小画像はピクセル化され、<img> タグ Vague を使用して表示するとさらにピクセル化して見えます。 背景画像のレンダリング スタイルを変更して、ラベルに表示されているように見せる方法はありますか? image-rendering プロパティを試しましたが、background-image では機能しないようです。 Firefoxでは綺麗に見えます。
Brave でのレンダリング例 (左側に background-image、右側に <img>) タグ:
#背景画像、画像 {
幅: 80ピクセル;
最小高さ: 80px;
マージン: 10px 5px;
表示: インラインブロック;
}
#背景画像 {
背景リピート: リピートなし;
背景位置: 中央;
背景サイズ: カバー;
背景画像: url("https://i.stack.imgur.com/X5EfB.png");
}
<div id="背景画像"></div> <img src="https://i.stack.imgur.com/X5EfB.png" />
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
これは、
で同じ結果が得られます。size:coverルールとposition:centerルールの両方が適用された場合にのみ発生するようです。object-fitをcover:に変更すると、![]()
#背景画像、画像 { 幅: 80ピクセル; 最小高さ: 80px; マージン: 10px 5px; 表示: インラインブロック; オブジェクトフィット: カバー; } #背景画像 { 背景リピート: リピートなし; 背景位置: 中央; 背景サイズ: カバー; 背景画像: url("https://i.stack.imgur.com/X5EfB.png"); }