background-position プロパティで画像の一部を表示する方法
2024-04-04
HTML/CSSで画像の一部のみを表示する方法
background-position プロパティを使用して、背景画像の表示位置を指定できます。
<div style="background-image: url(image.jpg);">
<p>テキスト</p>
</div>
div {
width: 200px;
height: 200px;
background-position: 50px 50px; /* 画像の左上隅から50pxずつずらす */
}
この例では、画像の左上隅から50pxずつずらして表示しています。
clip プロパティを使用して、画像の表示領域を矩形に切り取ることができます。
<img src="image.jpg" style="clip: rect(50px 200px 150px 50px);">
img {
width: 200px;
height: 200px;
}
この例では、画像の上部50px、右端200px、下部150px、左端50pxを切り取っています。
object-fit プロパティを使用して、画像の表示方法を指定できます。
<img src="image.jpg" style="object-fit: cover;">
img {
width: 200px;
height: 200px;
}
この例では、画像を容器のサイズに収まるように拡大・縮小して表示しています。
mask プロパティを使用して、画像をマスク画像で覆い隠すことができます。
<img src="image.jpg" style="mask: url(mask.png);">
img {
width: 200px;
height: 200px;
}
この例では、mask.png 画像を使用して、image.jpg 画像の一部を隠しています。
これらの方法を組み合わせて、さまざまな方法で画像の一部を表示することができます。
- 画像の一部を拡大表示したい場合は、
object-fit: zoom-in;を使用できます。 - 画像の一部をぼかしたい場合は、
filter: blur(5px);を使用できます。
詳細は、以下のサイトを参照してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像の一部のみを表示</title>
</head>
<body>
<h1>画像の一部のみを表示</h1>
<p>以下のサンプルコードは、HTML/CSSで画像の一部のみを表示する方法を示しています。</p>
<h2>`background-position` プロパティ</h2>
<div style="background-image: url(image.jpg); width: 200px; height: 200px; background-position: 50px 50px;">
<p>テキスト</p>
</div>
<h2>`clip` プロパティ</h2>
<img src="image.jpg" style="clip: rect(50px 200px 150px 50px); width: 200px; height: 200px;">
<h2>`object-fit` プロパティ</h2>
<img src="image.jpg" style="object-fit: cover; width: 200px; height: 200px;">
<h2>`mask` プロパティ</h2>
<img src="image.jpg" style="mask: url(mask.png); width: 200px; height: 200px;">
</body>
</html>
このコードを保存してブラウザで開くと、画像の一部のみが表示されることを確認できます。
補足
- 上記のコードは、あくまでサンプルです。実際の使用例に合わせてコードを修正する必要があります。
- 画像の表示方法は、ブラウザや環境によって異なる場合があります。
画像の一部のみを表示する他の方法
img タグの width と height 属性を使用して、画像のサイズを指定できます。
<img src="image.jpg" width="100" height="100">
この例では、画像を幅100px、高さ100pxで表示しています。
canvas 要素を使用して、画像の一部を切り取って表示できます。
<canvas id="canvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var image = new Image();
image.onload = function() {
ctx.drawImage(image, 50, 50, 100, 100);
};
image.src = "image.jpg";
</script>
<svg width="200" height="200">
<image href="image.jpg" x="50" y="50" width="100" height="100" />
</svg>
HTML/CSSで画像の一部のみを表示するには、さまざまな方法があります。
html css image
