2 つの例を示します。DIV をオーバーレイとして使用し、HTML5キャンバスを使用します。
DIV オーバーレイ:
LIVE DEMO
各コーナーに 4 つの 1/4 円の穴がある大きな正方形の不透明な .png を作成することをお勧めします。
の繰り返し背景として設定し.overlay
ます。その DIV を設定するよりもpackground-position: Xpx , Ypx;
、正確な中心にある任意の領域を完全にターゲットにすることができます。
HTML:
<div id="img">
<div class="overlay"></div>
</div>
CSS:
#img {
position:relative;
overflow:hidden;
width: 199px;
height: 390px;
background: url('iphone.jpg') no-repeat center center;
}
.overlay {
position:absolute;
height:100%;
width:100%;
background:url(http://i.stack.imgur.com/ohb0l.png);
/* PLAY HERE: */
background-position: 120px 130px;
}
それ以外の場合はキャンバスを使用してください:)
globalCompositeOperation = 'destination-out';
トリックを行います:
次のコードは、画像の上にマスクを配置し、マスクから円弧を削除します。
LIVE DEMO
HTML:
<canvas id="iphone"></canvas>
JS:
var cirsleSize = 30 , // circle radius
circleX = 120 , // X pos
circleY = 130 ; // Y pos
// ---------------------------------------------
var canvas = document.getElementById('iphone'),
ctx = canvas.getContext('2d'),
img = new Image();
canvas.height=390;
canvas.width=199;
img.onload = function() {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
ctx.fillStyle = "rgba(255,255,255,0)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
var mask = document.createElement('canvas');
mask.width = canvas.width;
mask.height = canvas.height;
var maskCtx = mask.getContext('2d');
maskCtx.fillStyle = "rgba(0,0,0,0.6)";
maskCtx.fillRect(0, 0, mask.width, mask.height);
maskCtx.globalCompositeOperation = 'destination-out';
maskCtx.arc(circleX, circleY, cirsleSize, 0, 2*Math.PI);
maskCtx.fill();
ctx.drawImage(mask,0,0);
};
img.src = 'iphone_199x390.jpg';