背景画像の適用範囲を指定する

基本のBOX：背景を境界の外側まで拡張する (境界線の下に重ね合わせられる)

<div class="bgImg1">
	//デフォルト
</div>

.bgImg1 {
	background-clip: border-box;
	}

背景をパディングの外側まで拡張する（境界線の下には背景が描かれない）

.bgImg2 {
	background-clip: padding-box;
	}

背景をコンテンツボックスの中に（切り取って）表示する

.bgImg3 {
	background-clip: content-box;
	}

テキストで背景色をクリップ

<div class="bgImg4">
	<p>春夏秋冬</p>
</div>

.bgImg4 {
	background-color: rgba(0,0,0,.6)!important;
	}
.bgImg4 p {
	-webkit-background-clip: text; /*-webkit- 必要*/
	background-clip: text;
	padding: 20px;
	font-size: 9vw;
	font-weight: bold;
	text-align: center;
	color: rgba(0,0,0,0);
	background-color: #d1eefc; /* colorより前に記述する */
	}

テキストで背景画像をクリップ

.bgImg5 {
	background-color: rgba(0,0,0,.6)!important;
	}
.bgImg5 p {
	-webkit-background-clip: text; /*-webkit- 必要*/
	background-clip: text;
	padding: 20px;
	font-size: 9vw;
	font-weight: bold;
	text-align: center;
	background-image: url('/Path/to/img04.png');
	color: rgba(0,0,0,0);
	}

テキストで背景のグラデーションをクリップ（アニメ付き）

.bgImg6 {
	background-color: rgba(220,220,220,.6)!important;
	}
.bgImg6 p {
	-webkit-background-clip: text;
	background-clip: text;
	background: linear-gradient(-45deg, rgba(139,0,139,1), rgba(139,0,139,.1));
	background-size: 200% 200%;
	color: rgba(0,0,0,0);
	animation: colorChange 8s;
	animation-iteration-count: infinite;
	margin-bottom: 3rem;
	text-align: center;
	font-size: 3vw;
	font-weight: bold;
	padding: 1rem;
	}
@keyframes colorChange {
	from {background-position: 0% 0%;}
	50% {background-position: 100% 100%;}
	to {background-position: 0% 0%;}
	}
@media screen and (max-width: 767.9px) {
	.bgImg6 p {
		font-size: 4.2vw;
		}
	}