記事の内容
background-clip
background-clipプロパティは、背景画像の表示領域を指定するプロパティになります。
background-clipプロパティ
記法
.クラス名 {
background-origin : 表示の基準位置;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./main.css" />
<title>back-groundプロパティ</title>
</head>
<body>
<p>表示領域：border-box</p>
<p>ボーダー領域に背景画像が表示</p>
<div class="background-clip-border-box"></div>
<hr />
<p>表示領域：padding-box</p>
<p>パディング領域に背景画像が表示</p>
<div class="background-clip-padding-box"></div>
<hr />
<p>表示領域：content-box</p>
<p>コンテンツ領域に背景画像が表示</p>
<div class="background-clip-content-box"></div>
</body>
</html>.background-clip-border-box {
height: 200px;
width: 200px;
padding: 20px;
border: dotted 20px rgba(0, 0, 0, 0.5);
background-image: url(./back-ground.png);
background-repeat: no-repeat;
background-color: grey;
background-clip: border-box;
}
.background-clip-padding-box {
height: 200px;
width: 200px;
padding: 20px;
border: dotted 20px rgba(0, 0, 0, 0.5);
background-image: url(./back-ground.png);
background-repeat: no-repeat;
background-color: grey;
background-clip: padding-box;
}
.background-clip-content-box {
height: 200px;
width: 200px;
padding: 20px;
border: dotted 20px rgba(0, 0, 0, 0.5);
background-image: url(./back-ground.png);
background-repeat: no-repeat;
background-color: grey;
background-clip: content-box;
}出力結果
表示領域：border-box
ボーダー領域に背景画像が表示
表示領域：padding-box
パディング領域に背景画像が表示
表示領域：content-box
コンテンツ領域に背景画像が表示
background-origin
background-originプロパティは、背景画像の表示する基準位置を指定するプロパティになります。
background-clip(background-origin指定あり)プロパティ
記法
.クラス名 {
background-clip : 表示領域;
background-origin : 表示の基準位置;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./main.css" />
<title>back-groundプロパティ</title>
</head>
<body>
<p>表示領域：border-box</p>
<p>基準位置：border-box</p>
<div class="background-clip-border-box2"></div>
<hr />
<p>表示領域：padding-box</p>
<p>基準位置：border-box</p>
<div class="background-clip-padding-box2"></div>
<hr />
<p>表示領域：content-box</p>
<p>基準位置：border-box</p>
<div class="background-clip-content-box2"></div>
</body>
</html>.background-clip-border-box2 {
height: 200px;
width: 200px;
padding: 20px;
border: dotted 20px rgba(0, 0, 0, 0.5);
background-image: url(./back-ground.png);
background-repeat: no-repeat;
background-color: grey;
background-clip: border-box;
background-origin: border-box;
}
.background-clip-padding-box2 {
height: 200px;
width: 200px;
padding: 20px;
border: dotted 20px rgba(0, 0, 0, 0.5);
background-image: url(./back-ground.png);
background-repeat: no-repeat;
background-color: grey;
background-clip: padding-box;
background-origin: border-box;
}
.background-clip-content-box2 {
height: 200px;
width: 200px;
padding: 20px;
border: dotted 20px rgba(0, 0, 0, 0.5);
background-image: url(./back-ground.png);
background-repeat: no-repeat;
background-color: grey;
background-clip: content-box;
background-origin: border-box;
}出力結果
表示領域：border-box
基準位置：border-box
表示領域：padding-box
基準位置：border-box
表示領域：content-box
基準位置：border-box