CSS 콘텐츠 상자 값
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB앞으로
- 2023-08-27 09:17:02595검색
CSSBackground-origin 속성을 사용하여 콘텐츠 상자 값을 설정하세요. content-box 값을 사용하면 배경 이미지가 콘텐츠의 왼쪽 상단에서 시작됩니다.
다음 코드를 실행하여 콘텐츠 상자 값을 구현할 수 있습니다.
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>위 내용은 CSS 콘텐츠 상자 값의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제