CSS|画像の上に網点を乗せるシンプルな方法

Tips
最近流行りのアレです。画質の悪い画像でも、網を乗せればそれなりにきれいに見せれます。応用が効きそうなコードにしました。動画にも使えると思います。応用編は後日紹介したいです。
スポンサーリンク

 divで囲う方法

前回紹介したCSS3のブレンドモードを使う方法だと、色々な透明効果が使えるのですが、毎回画像を指定しないと動きません。

画像の上に網を乗せる処理であるなら、<div>で囲う方法が使い勝手が良いと思います。

コード紹介

HTML
<div class="sample01">
<div class="sample02">
</div>
<img src="../背景の画像.jpg" />
</div>
CSS
 
/*画像の枠用*/
.sample01{
    position: relative;
    overflow: hidden;
    max-width: 1920px;
    margin: 0 auto;
    max-height: 1080px;
}

/*網画像用*/
.sample02{
    background-image: url(http://表示したい網の画像.png);
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 100;
}

解説

<div>を2つ使います。
“sample02” のみですと網点が画像から飛び出してしまうので、さらに上の階層が必要でした。
“sample01” は “sample02″の枠を作っています。
“sample02” にてはみ出した画像を表示させないようにさせています。

コメント