html - Web サイトの (背景) 画像に対するラスター効果

Question

Web サイトの背景として、次のようなものを作成したいと考えています。

このラスターのような効果を実現するための最良の方法は何ですか?

Answer 1

@ジュリアン

CSSz-indexプロパティを使用htmlして、CSS3 グラデーション背景で要素をレイヤー化してスタイル設定bodyし、ラスター背景で要素をレイヤー化してスタイル設定します。

注: 背景には、CSS グラデーション背景または実際の画像を使用できます。CSS3 グラデーション背景とデータ URI をサポートしていない古いブラウザーをサポートするために、必ずフォールバックを実装してください。

コードとデモをチェックしてください: http://jsfiddle.net/QMtK9/

<style>
*{margin:0;padding:0;border:0}
html{
background:#eee;/*Old browsers*/
background:#eee -moz-linear-gradient(top,rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%);/*FF3.6+*/
background:#eee -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,255,255,.2)),color-stop(100%,rgba(0,0,0,.2)));/*Chrome,Safari4+*/
background:#eee -webkit-linear-gradient(top,rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%);/*Chrome10+,Safari5.1+*/
background:#eee -o-linear-gradient(top,rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%);/*Opera11.10+*/
background:#eee -ms-linear-gradient(top,rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%);/*IE10+*/
background:#eee linear-gradient(top,rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%);/*W3C*/
z-index:1 !important
}
html,body{height:100%;min-height:100%;background-attachment:fixed}
html body{position:relative !important}
body{
background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVQImWNgYGD4z0AswK4SAFXuAf8EPy+xAAAAAElFTkSuQmCC) repeat center center !important;
z-index:2 !important
}
</style>

その他のリソース:

• https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index
• https://www.google.com/#q=css+z-index

Answer 2

これは私が自分で行うことです：

1. フォトショップで正方形を作成します (これは 3x3 または 5x5 または何でもかまいません)。
2. 一部を黒く、もう一方を透明または半透明にする
3. それらをpngとして保存します

そして、色に使用される2番目の画像が必要になります

1. フォトショップでいくつかの色を作成する
2. 画像を半透明にする
3. .png として保存

次に、CSS3 では次のように配置します。

body {
   background-image: url("images/raster.png");
   background-repeat: repeat;
}
#wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("images/colorimage.png") top center no-repeat;
}

Answer 3

2 秒間のグーグル検索で、この Web サイトが表示されました: http://www.patternify.com/