ホームページ >ウェブフロントエンド >CSSチュートリアル >css3でbackground-clipとbackground-originを区別する方法（コード例）
css3でbackground-clipとbackground-originを区別する方法（コード例）
- 青灯夜游オリジナル
- 2018-09-14 16:58:231609ブラウズ
この章では、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('8.jpg');
background-repeat:no-repeat;
-webkit-background-clip:border-box;
border:10px dashed #92b901;
}
</style>
</head>
<body>
<div>
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>
</body>
</html>レンダリング:
background-origin: 背景画像の配置領域を指定します。ただし、その属性には、border-box、padding-box、content-box も含まれます。 , その説明は「背景画像」であることに注意してください。つまり、背景に対してのみスタイル操作を実行できると言われています。つまり、画像の描画を開始する領域を規定する位置に相当します。これは、画像の左上隅の開始位置を規定することと同等であり、残りの部分については関与しません。 -origin: 絵を描くときは境界線から開始できますが、上の 2 番目の図に示すように、一部のコンテンツが境界線で覆われてしまう場合があります。
以上がcss3でbackground-clipとbackground-originを区別する方法（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。