css - すべての要素にパターンを重ねる

Question

2 つ以上の要素 (背景が異なる) に画像 (パターン) を配置することはできますか? (Adobe Photoshop のパターン塗りつぶしのようなもの)

スクリーンショットは次のとおりです。

注: 要素のコンテンツは、ユーザーが選択できる必要があります。他の要素の上にある div は必要ありません。

Answer 1

.png ファイル (または、必要に応じて .gif) を作成し、divこれをこのパターンにしたい上に重ねるだけです。

相対位置を使用して親要素を設定し、配置する要素で絶対位置を使用する必要があります。したがって、テーブルに基づいて配置する場合は、 position: relative to the table (既に相対的に配置されているため何もしません) と position: absolute をオーバーレイに追加する必要があります。絶対配置では要素がドキュメント フローから取り除かれ、相対配置では要素がドキュメント フローに残ります。この理由は、CSS の仕組みに基づいています: http://www.w3schools.com/css/pr_class_position.asp

relative 要素は通常の位置に対して相対的に配置されるため、"left:20" は要素の LEFT 位置に 20 ピクセルを追加します

絶対要素は、最初に配置された (静的ではない) 祖先要素に対して相対的に配置されます。

ソース:位置オーバーレイ div

コード例:

<div class="overlay">
    <div class="overlay-content">
    </div>
    Content goes here
</div>

CSS の場合:

div.overlay{
    position: relative;
}

div.overlay-content{
    position: absolute;
    top: 0;
    left :0;
    width: 100%;
    height: 100%;
    background: url(path/to/image.png) repeat top left;
    pointer-events:none; /* To be able to click through */
}

クリックトラフについては、この回答をご覧ください: Click through a DIV to below elements