css - 背景画像がぼやけるのを防ぐ方法

Question

背景画像がぼやけていると Web サイトの外観が損なわれるため、CSS でテキストがその上にあるときに背景画像がぼやけないようにする方法を知る必要があります。

私のCSSは次のとおりです。

background: #ff0000 url(img/rain.jpg) top center repeat-y; 
background-size: 100%; 

しかし、行がぼやけてしまいたくないテキストがある場所にロードすると、どうすればよいですか?

フィドルの例

Answer 1

追加してみてください：

image-rendering: -webkit-optimize-contrast;

Answer 2

クロスブラウザテクニックは次のとおりです。

 image-rendering: crisp-edges;
 image-rendering: -moz-crisp-edges;          /* Firefox */
 image-rendering: -o-crisp-edges;            /* Opera */
 image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming)*/
 -ms-interpolation-mode: nearest-neighbor;   /* IE (non-standard property) */

Answer 3

の使用はbackground-size: cover;background-position:50% 50%;あなたを助ける..

* {
font-family: Calibri, Comic Sans MS, Serif;
background: #ff0000 url(http://www.coolguysite.co.uk/blog/templates/default/img/rain.jpg)   top center repeat-y;
background-size: cover;
background-position:50% 50%;
}

更新されたフィドル

Answer 4

使用できますimage-rendering: pixelated。Mozilla Developer Network の例を次に示します。

.pixelated {
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

https://jsfiddle.net/9dtj2wkq/

Answer 5

私は次のようにしてそれを得ました：

background: transparent;

h2andp要素に。