Home >Web Front-end >CSS Tutorial >CSS content box value

CSS content box value

WBOYforward: 2023-08-27 09:17:02563browse

CSS 内容框值

Use the CSSbackground-origin property to set the content box value. With the content-box value, the background image starts at the top left corner of the content.

You can try running the following code to implement the content-box value:

Example

Live Demo

<!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>

The above is the detailed content of CSS content box value. For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Indicates what character set to use for stylesheets written in CSSNext article：Indicates what character set to use for stylesheets written in CSS

See more

CSS content box value

Example

Related articles