css3でbackground-clipとbackground-originを区別する方法（コード例）-CSSチュートリアル-php.cn

css3でbackground-clipとbackground-originを区別する方法（コード例）

青灯夜游

リリース： 2018-09-14 16:58:23

オリジナル

1608 人が閲覧しました

この章では、CSS3でbackground-clipとbackground-originを区別する方法を紹介します。 (コード例)。困っている友人は参考にしていただければ幸いです。

CSS3では、background-clipとbackground-originはほぼ同じ機能を持ちますが、微妙に異なる点がいくつかあります。

1. Background-clip 属性

background-clip: 背景が純色で絵の場合の描画領域を指定します。表示方法も同じです。これには、border-box、padding-box、content-box の 3 つの属性があります。

1: 背景は境界線から描画されますが、背景が画像の場合は、背景に描画されます。左と上図は描かれていませんが、下と右には図があります。

コード:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style>
			div {
			  width:433px;
			　　height:200px;
			　　padding:50px;
			　　background-color: red;
			　　background-image:url(&#39;8.jpg&#39;);
			　　background-repeat:no-repeat;
			　　-webkit-background-clip:border-box;
			　　border:10px dashed  #92b901;
			}
		</style>
	</head>

	<body>
		<div>
			这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
		</div>
	</body>

</html>

ログイン後にコピー

レンダリング:

css3でbackground-clipとbackground-originを区別する方法（コード例）

##2. パディングボックス: 背景は境界線の内側に描画されます (境界線を除く)。

3. コンテンツ部分から背景が描画されます。 ##2. Background-origin 属性

background-origin: 背景画像の配置領域を指定します。ただし、その属性には、border-box、padding-box、content-box も含まれます。 , その説明は「背景画像」であることに注意してください。つまり、背景に対してのみスタイル操作を実行できると言われています。つまり、画像の描画を開始する領域を規定する位置に相当します。これは、画像の左上隅の開始位置を規定することと同等であり、残りの部分については関与しません。 -origin: 絵を描くときは境界線から開始できますが、上の 2 番目の図に示すように、一部のコンテンツが境界線で覆われてしまう場合があります。

以上がcss3でbackground-clipとbackground-originを区別する方法（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。