CSSコンテンツボックスの値-CSSチュートリアル-php.cn

CSSコンテンツボックスの値

WBOY

リリース： 2023-08-27 09:17:02

転載

523 人が閲覧しました

CSS 内容框值

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 サイトの他の関連記事を参照してください。