ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSコンテンツボックスの値
CSSコンテンツボックスの値
- WBOY転載
- 2023-08-27 09:17:02566ブラウズ
CSSbackground-origin プロパティを使用して、コンテンツ ボックスの値を設定します。 content-box 値を使用すると、背景画像はコンテンツの左上隅から始まります。
次のコードを実行して、コンテンツ ボックスの値を実装してみることができます:
Example
ライブ デモ
<!DOCTYPE html>
<html>
<head>
<style>
#value1 {
border: 3px solid blue;
padding: 30px;
background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);
background-repeat: no-repeat;
background-origin: padding-box;
}
#value2 {
border: 3px solid orange;
padding: 30px;
background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);
background-repeat: no-repeat;
background-origin: border-box;
}
#value3 {
border: 3px dashed yellow;
padding: 30px;
background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);
background-repeat: no-repeat;
background-origin: content-box;
}
</style>
</head>
<body>
<h1>padding-box value</h1>
<div id = "value1">
<h2>Heading 2</h2>
<p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.
<h3>Heading 3</h3>
This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.</p>
</div>
<h1>border-box value</h1>
<div id = "value2">
<h2>Heading 2</h2>
<p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.
<h3>Heading 3</h3>
This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.</p>
</div>
<h1>content-box value</h1>
<div id = "value3">
<h2>Heading 2</h2>
<p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.
<h3>Heading 3</h3>
This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.</p>
</div>
</body>
</html>以上がCSSコンテンツボックスの値の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はtutorialspoint.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。