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

background-clip

基本の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;
		}
	}

春の桜まつり


TOP