画像(写真)のマスキング方法を説明します。
次の各要素を使用してでのマスキングを行います。
グラデーションデータを使用してマスキングを行います。
マスキングは、次の手順で実施します。
マスキング生成を確認するために別ウィンドウで表示してください。
ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像のマスク</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
* {
padding: 0;
margin: 0;
word-wrap: break-word;
box-sizing: border-box;
}
.container {
border: #fff 1px solid;
}
.wrapper {
max-width: 400px;
margin: 0 auto;
}
img {
width: 100%;
vertical-align: top;
}
p {
font-size: 1.0rem;
}
.mask1 {
}
.mask2 {
background: radial-gradient(red, transparent 100%);
}
.mask3 {
mask-image: radial-gradient(red, transparent 100%);
-webkit-mask-image: radial-gradient(red, transparent 100%);
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<p>【マスク前画像】</p>
<div class="mask1">
<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
</div>
<p>【マスク用グラデーション】</p>
<div class="mask2">
<img src="images/mask-transparent.png" alt="画像のマスクサンプル">
</div>
<p>【マスク結果】</p>
<div class="mask3">
<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
</div>
</div>
</div>
</body>
</html>
グラデーションデータを使用してマスキングを行います。
マスキングは、次の手順で実施します。
【注意事項】
本指定は、サーバーに配置しないと正しく動作しません。サーバーに配置して動作確認をしてください。
マスキング生成を確認するために別ウィンドウで表示してください。
ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像のマスク</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
* {
padding: 0;
margin: 0;
word-wrap: break-word;
box-sizing: border-box;
}
.container {
border: #fff 1px solid;
}
.wrapper {
max-width: 400px;
margin: 0 auto;
}
img {
width: 100%;
vertical-align: top;
}
p {
font-size: 1.0rem;
}
.mask1 {
}
.mask2 {
}
.mask3 {
-webkit-mask-image: url('images/mask-heart.png');
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
-webkit-mask-position: center;
mask-image: url('images/mask-heart.png');
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<p>【マスク前画像】</p>
<div class="mask1">
<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
</div>
<p>【マスク用画像ファイル】</p>
<div class="mask2">
<img src="images/mask-heart.png" alt="画像のマスクサンプル">
</div>
<p>【マスク結果】</p>
<div class="mask3">
<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
</div>
</div>
</div>
</body>
</html>
グラデーションデータを使用してマスキングを行います。
マスキングは、次の手順で実施します。
【注意事項】
本指定は、サーバーに配置しないと正しく動作しません。サーバーに配置して動作確認をしてください。
マスキング生成を確認するために別ウィンドウで表示してください。
ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像のマスク</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
* {
padding: 0;
margin: 0;
word-wrap: break-word;
box-sizing: border-box;
}
.container {
border: #fff 1px solid;
}
.wrapper {
max-width: 400px;
margin: 0 auto;
}
img {
width: 100%;
vertical-align: top;
}
p {
font-size: 1.0rem;
}
.mask1 {
}
.mask2 {
}
.mask3 {
background: radial-gradient(red, transparent 100%);
}
.mask4 {
-webkit-mask-image: url('images/mask-heart.png'), radial-gradient(red, transparent 100%);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
-webkit-mask-position: center;
mask-image: url('images/mask-heart.png'), radial-gradient(red, transparent 100%);
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<p>【マスク前画像】</p>
<div class="mask1">
<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
</div>
<p>【マスク用画像ファイル】</p>
<div class="mask2">
<img src="images/mask-heart.png" alt="画像のマスクサンプル">
</div>
<p>【マスク用グラデーション】</p>
<div class="mask3">
<img src="images/mask-transparent.png" alt="画像のマスクサンプル">
</div>
<p>【マスク結果】</p>
<div class="mask4">
<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
</div>
</div>
</div>
</body>
</html>
グラデーションデータを使用してマスキングを行います。
マスキングは、次の手順で実施します。
マスキング生成を確認するために別ウィンドウで表示してください。
ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像のマスク</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
* {
padding: 0;
margin: 0;
word-wrap: break-word;
box-sizing: border-box;
}
.container {
border: #fff 1px solid;
}
.wrapper {
max-width: 400px;
margin: 0 auto;
}
img {
width: 100%;
vertical-align: top;
}
p {
font-size: 1.0rem;
}
.mask1 {
}
.mask2 {
clip-path: circle(111px at center);
}
.mask3 {
clip-path: ellipse(50% 50% at center);
}
.mask4 {
clip-path: inset(20px 20px 20px 20px round 15px);
}
.mask5 {
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<p>【マスク前画像】</p>
<div class="mask1">
<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
</div>
<p>【正円でのマスク結果】</p>
<div class="mask2">
<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
</div>
<p>【楕円でのマスク結果】</p>
<div class="mask3">
<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
</div>
<p>【長方形でのマスク結果】</p>
<div class="mask4">
<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
</div>
<p>【多角形でのマスク結果】</p>
<div class="mask5">
<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
</div>
</div>
</div>
</body>
</html>
グラデーションデータを使用してマスキングを行います。
マスキングは、次の手順で実施します。
マスキング生成を確認するために別ウィンドウで表示してください。
ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像のマスク</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
* {
padding: 0;
margin: 0;
word-wrap: break-word;
box-sizing: border-box;
}
.container {
border: #fff 1px solid;
}
.wrapper {
max-width: 400px;
margin: 0 auto;
}
img {
width: 100%;
vertical-align: top;
}
p {
font-size: 1.0rem;
}
.mask1 {
}
.mask2 {
font-size: 5rem;
font-weight: bold;
text-align: center;
}
.mask3 {
font-size: 5rem;
font-weight: bold;
text-align: center;
background-image: url("images/mask-sample.jpg");
background-position: center;
background-size: cover;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<p>【マスク前画像】</p>
<div class="mask1">
<img src="images/mask-sample.jpg" alt="画像のマスクサンプル">
</div>
<p>【マスク用文字】</p>
<div class="mask2">
MOMIJI
</div>
<p>【マスク結果】</p>
<div class="mask3">
MOMIJI
</div>
</div>
</div>
</body>
</html>