CSS content-box 值


使用 CSS background-origin 屬性設定 content-box 值。通content-box 過使用,背景影像從內容的左上角開始。

你可以嘗試執行以下程式碼來實現 content-box 值

示例

動態演示

<!DOCTYPE html>
<html>
   <head>
      <style>
         #value1 {
            border: 3px solid blue;
            padding: 30px;
            background: url(https://tutorialspoint.tw/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://tutorialspoint.tw/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://tutorialspoint.tw/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>

更新時間:2020 年 6 月 23 日

172 次瀏覽

開啟你的 職業生涯

完成課程並獲得認證

開始吧
廣告
© . All rights reserved.