数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究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.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://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://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>
更新时间：2020 年 6 月 23 日
172 次浏览
广告