CSS 内容框值

百变鹏仔 3个月前 (09-20) #CSS

文章标签内容

使用 CSSbackground-origin 属性设置内容框值。通过 content-box 值，背景图像从内容的左上角开始。

您可以尝试运行以下代码来实现 content-box 值：

示例

现场演示

<!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 内容框值

示例

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写