Way to cover an image with another image

方法1: position: absolute; で重ねる。

メリット: それぞれリンクを張れる。
デメリット: 特になし？

HTML
CSS

<div class="imageCover1">
    <a href="https://twitter.com/kazoo04" target="_blank" class="imageLink">
        <img src="http://wada811.github.io/sample/imageCover/img/kazoo04-background.png" alt="@kazoo04氏背景" class="baseImage">
    </a>
    <a href="https://twitter.com/wada811" target="_blank" class="imageLink">
        <img src="http://wada811.github.io/sample/assets/img/marunichigaiya_512_trans.png" alt="丸に違い矢" class="coverImage">
    </a>
</div>

.imageCover1 {
    position: relative;
    width: 512px;
    height: 512px;
}

.imageCover1 .baseImage {
    width: 512px;
    height: 512px;
}

.imageCover1 .coverImage {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 256px;
    height: 256px;
}

方法2: 背景画像の上に img タグを載せる。

メリット: 背景画像を右クリックで保存できないようにすることができる。
デメリット: 特になし？

HTML
CSS

<div class="imageCover2">
    <a href="https://twitter.com/wada811" target="_blank" class="imageLink">
        <img src="http://wada811.github.io/sample/assets/img/marunichigaiya_512_trans.png" alt="丸に違い矢" class="coverImage">
    </a>
</div>

.imageCover2 {
    position: relative;
    width: 512px;
    height: 512px;
    background: url('http://wada811.github.io/sample/imageCover/img/kazoo04-background.png') no-repeat scroll 0 0 transparent;
}

.imageCover2 .coverImage {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 256px;
    height: 256px;
}

方法3: 擬似要素 :after で content: url() を使う。

メリット: カバー画像を右クリック保存できないようにする。
デメリット: 特になし？

HTML
CSS

<div class="imageCover3">
    <a href="https://twitter.com/kazoo04" target="_blank" class="imageLink">
        <img src="http://wada811.github.io/sample/imageCover/img/kazoo04-background.png" alt="@kazoo04氏背景" class="baseImage">
    </a>
</div>

.imageCover3 {
    position: relative;
}

.imageCover3 .baseImage {
    width: 512px;
    height: 512px;
}

.imageCover3:after {
    content: url('http://wada811.github.io/sample/assets/img/marunichigaiya_512_trans.png');
    position: absolute;
    right: -128px;
    bottom: -128px;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
}

方法4: 親要素と擬似要素 :after で background を使う。

メリット: 両方の画像を右クリック保存できないようにする。
デメリット: CSS3 の background-size を利用しているのでサポートしていないブラウザで使えない。

HTML
CSS

<div class="imageCover4"></div>

.imageCover4 {
    position: relative;
    width: 512px;
    height: 512px;
    background: url('http://wada811.github.io/sample/imageCover/img/kazoo04-background.png') no-repeat scroll 0 0 transparent;
}

.imageCover4:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 256px;
    height: 256px;
    background: url('http://wada811.github.io/sample/assets/img/marunichigaiya_512_trans.png') no-repeat scroll 0 0 transparent;
    background-size: 256px 256px;
}

方法5: 背景画像を複数指定する。

メリット: 両方の画像を右クリック保存できないようにする。
デメリット: background-imageが複数指定できるのはCSS3からなのでサポートしていないブラウザで使えない。

HTML
CSS

<div class="imageCover5"></div>

.imageCover5 {
    width: 512px;
    height: 512px;
    background-image: url('http://wada811.github.io/sample/assets/img/marunichigaiya_512_trans.png'), url('http://wada811.github.io/sample/imageCover/img/kazoo04-background.png');
    background-size: 256px 256px, 512px 512px;
    background-position: 256px 256px, 0 0;
    background-repeat: no-repeat;
    background-attachment: scroll, scroll;
    background-color: transparent;
}

方法6: Canvas で画像を読み込んで描画する。

メリット: Canvas で複数の画像を合成した画像を保存できるようにすることができる。
デメリット: Canvas をサポートしていないブラウザで使えない。

HTML
CSS
JavaScript

<div class="imageCover6">
    <canvas id="jsImageCoverCanvas"></canvas>
</div>

.imageCover6 {
    width: 512px;
    height: 512px;
}

$(document).ready(function(){
    showImageCanvas();
});

function showImageCanvas(){
    var fileArray = ['http://wada811.github.io/sample/imageCover/img/kazoo04-background.png', 'http://wada811.github.io/sample/assets/img/marunichigaiya_512_trans.png'];
    var xywh = [{x: 0, y: 0, w: 512, h: 512}, {x: 256, y: 256, w: 256, h: 256}];
    var numFiles = fileArray.length;
    var loadedCount = 0;
    var imageObjectArray = [];
    var canvas = document.getElementById('jsImageCoverCanvas');

    var ctx = canvas.getContext('2d');

    function loadImages(){
        var imgObj = new Image();
        imgObj.addEventListener('load',
            function(){
                loadedCount++;
                imageObjectArray.push(imgObj);
                if(numFiles === loadedCount){
                    drawImage();
                }else{
                    loadImages();
                }
            },
            false
        );
        imgObj.src = fileArray[imageObjectArray.length];
    }
    function drawImage(){
        canvas.width = 512;
        canvas.height = 512;
        for(var i in imageObjectArray){
            ctx.drawImage(imageObjectArray[i], xywh[i]['x'], xywh[i]['y'], xywh[i]['w'], xywh[i]['h']);
            imageObjectArray[i] = null;
        }
    }
    loadImages();
}