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

基本のBOX

div[class^='bgImg'] {
   width: 90%;
   min-height: 250px;
   margin: 2rem auto 3rem;
   padding: 20px 50px;
   border: 20px dashed #000;
   background-color: #d1eefc;
   }

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

/* デフォルト */
.bgImg1 {
   background-clip: border-box;
   }
	

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

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

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

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

//コンテンツボックスは padding分を含めない
	

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

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

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