さぁ!検索しよう!

画像の上に重ねるオーバーレイに、SVGで作成したドットを背景画像として加える方法です。

使用例

ドットが加えられたオーバーレイは主にスライダーで使われているようです。以下は実際に使用されているサイトです。

PHOTOSHOPVIP

%e3%83%95%e3%82%a9%e3%83%88%e3%82%b7%e3%83%a7%e3%83%83%e3%83%97%e3%82%84%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%ae%e7%84%a1%e6%96%99%e7%b4%a0%e6%9d%90%e3%80%81%e3%83%8b%e3%83%a5%e3%83%bc%e3%82%b9
http://photoshopvip.net/

ONZE

%e3%80%90php%e3%80%91%e6%95%b0%e5%ad%97%e3%81%ae%e8%a1%a8%e8%a8%98%e3%82%92%ef%bc%bbnumber_format%ef%bc%bd%e3%81%a73%e6%a1%81%e3%81%ae%e3%82%ab%e3%83%b3%e3%83%9e%e5%8c%ba%e5%88%87%e3%82%8a%e3%81%ab
http://on-ze.com/blog

ドットの作成

始めにSVGのドットを作成します。作成にはIllustratorを使います。

1. アートボードを新規作成

アートボードサイズを横3px × 縦3pxで新規作成します。

2. 楕円形オブジェクトを作成

楕円形ツールで、サイズが横1px × 縦1px、塗りが#000000線なしのオブジェクトを作成します。

dot-illustrator

3. 楕円形オブジェクトを左上に整列

2.で作成した楕円形オブジェクトをアートボードの左上ぴったりに整列させます。上手く整列されない場合は「ピクセルグリッドの整合」にチェックが付いている可能性が高いです。外しましょう。

dot-il2

4. 別名で保存

別名で保存を選択し、ファイル形式をdot.svgとし、画像を置いているディレクトリに保存します。※SVGオプションは何も変更せずにOKを押します。

作成したドットをオーバーレイに加える

続いて、CSSで先程保存したSVGをオーバーレイに加えます。

オーバーレイ.dot-overlayの子要素としてドット:beforeを生成し、それを枠いっぱいに配置されるように.thumbnailposition:relative;を指定します。

CSS

body {
    margin: 0;
}

img {
    display: block;
    height: auto;
    max-width: 100%;
}

.thumbnail {
    position: relative;
    width: 250px;
}

.dot-overlay {
    background: rgba(0, 0, 0, 0.4);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.dot-overlay:before {
    background: url(http://tsukulog.net/wp-content/themes/tsukulog/image/dot.svg);
    content: '';
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

ドットを加えたオーバーレイを画像の上に表示

あとは以下のように、.dot-overlayクラスをドット入りオーバーレイとしたい箇所のHTMLタグに記述するだけです。

HTML

<aside class="thumbnail">
    <img src="images/cat.jpg" alt=""/>
    <div class="dot-overlay"></div>
</aside>

DEMO

下記が完成したものです。

以上で、オーバーレイにドットを加え、サムネイルの上に重ねる方法を終わります。