CSS3 배경
CSS3 Background
CSS3에는 배경 요소를 더욱 효과적으로 제어할 수 있는 몇 가지 새로운 배경 속성이 포함되어 있습니다.
이 장에서는 다음 배경 속성에 대해 배웁니다.
Background-image
Background-size
Background-origin
Background-clip
CSS3 background-image 속성
CSS3에서는 background-image 속성을 통해 배경 이미지를 추가할 수 있습니다.
다양한 배경 이미지와 이미지는 쉼표로 구분되며, 모든 이미지의 상단에 표시되는 이미지가 첫 번째 이미지입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
#example1 {
background-image: url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg), url(http://scimg.jb51.net/allimg/160822/103-160R21K405308.jpg);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
</style>
</head>
<body>
<div id="example1">
<h1>正能量</h1>
<p>你是否经常狠不下心来做事，对自己不够狠，对别人也不够狠。所以，你总是黏黏糊糊，总是不忍心去拒绝别人，总是下不了决心让自己过的更好，总是缠绵过往不能自拔……完了，优柔寡断的你，必须狠一次，否则你永远也活不出自己</p>
<p>别为小小的委屈难过，人生在世，注定要受许多委屈。一个人越是成功，他所遭受的委屈也越多。要使自己的生命获得极值和炫彩，就不能太在乎委屈，不能让它们揪紧你的心灵、扰乱你的生活。你要学会一笑置之，超然待之，要学会转化势能。智者懂得隐忍，原谅周围的那些人，让我们在宽容中壮大。</p>
</div>
</body>
</html>프로그램을 실행하고 사용해 보세요
이미지마다 여러 속성을 설정할 수 있습니다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
#example1 {
background: url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg) right bottom no-repeat, url(http://scimg.jb51.net/allimg/160822/103-160R21K405308.jpg) left top repeat;
padding: 15px;
}
</style>
</head>
<body>
<div id="example1">
<h1>正能量</h1>
<p>你是否经常狠不下心来做事，对自己不够狠，对别人也不够狠。所以，你总是黏黏糊糊，总是不忍心去拒绝别人，总是下不了决心让自己过的更好，总是缠绵过往不能自拔……完了，优柔寡断的你，必须狠一次，否则你永远也活不出自己</p>
<p>别为小小的委屈难过，人生在世，注定要受许多委屈。一个人越是成功，他所遭受的委屈也越多。要使自己的生命获得极值和炫彩，就不能太在乎委屈，不能让它们揪紧你的心灵、扰乱你的生活。你要学会一笑置之，超然待之，要学会转化势能。智者懂得隐忍，原谅周围的那些人，让我们在宽容中壮大。</p>
</div>
</body>
</html>프로그램을 실행하고 사용해 보세요
CSS3 배경 크기 속성
배경 크기는 크기를 지정합니다 배경 이미지의 . CSS3 이전에는 배경 이미지 크기가 이미지의 실제 크기에 따라 결정되었습니다.
배경 이미지는 CSS3에서 지정할 수 있으므로 다양한 환경에서 배경 이미지의 크기를 다시 지정할 수 있습니다. 크기를 픽셀 또는 백분율로 지정할 수 있습니다.
지정하는 크기는 상위 요소의 너비와 높이의 백분율입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
body
{
background:url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg);
background-size:80px 60px;
background-repeat:no-repeat;
padding-top:40px;
}
</style>
</head>
<body>
<p>人心灵的伤痛若无知己来抚慰，便会荒芜;人的欢乐若知己来共享，再多的快乐也是悲伤。知己之于人，本是必不可缺。一个人的痛苦要找人倾诉，一个人的愁绪要有人来排解。人若没有知己，心灵便是一片怎样的荒凉。</p>
<p>原始图片: <img src="https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg" alt="Flowers" width="224" height="162"></p>
</body>
</html>프로그램을 실행해서 사용해 보세요
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
background:url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div>人心灵的伤痛若无知己来抚慰，便会荒芜;人的欢乐若知己来共享，再多的快乐也是悲伤。知己之于人，本是必不可缺。一个人的痛苦要找人倾诉，一个人的愁绪要有人来排解。人若没有知己，心灵便是一片怎样的荒凉。</div>
</body>
</html>프로그램을 실행해서 사용해 보세요
CSS3의 background-Origin 속성
background-Origin 속성은 배경 이미지의 위치 영역을 지정합니다 .
배경 이미지는 콘텐츠 상자, 패딩 상자, 테두리 상자 영역에 배치할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div
{
border:1px solid black;
padding:35px;
background-image:url('https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg');
background-repeat:no-repeat;
background-position:left;
}
#div1
{
background-origin:border-box;
}
#div2
{
background-origin:content-box;
}
</style>
</head>
<body>
<p>background-origin:border-box:</p>
<div id="div1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
<p>background-origin:content-box:</p>
<div id="div2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</body>
</html>프로그램을 실행해서 사용해 보세요
CSS3 배경 클립 속성
CSS3의 배경 클립 배경 클리핑 속성은 지정된 위치부터 그리기 시작합니다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
#example1 {
border: 10px dotted #e53f3f;
padding:35px;
background: yellow;
}
#example2 {
border: 10px dotted #4fcfc4;
padding:35px;
background: yellow;
background-clip: padding-box;
}
#example3 {
border: 10px dotted #8ceed8;
padding:35px;
background: yellow;
background-clip: content-box;
}
</style>
</head>
<body>
<p>没有背景剪裁 (border-box没有定义):</p>
<div id="example1">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<p>background-clip: padding-box:</p>
<div id="example2">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<p>background-clip: content-box:</p>
<div id="example3">
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</body>
</html>프로그램을 실행하여 사용해 보세요
새로운 배경 속성
| 주문 | Description | CSS |
|---|---|---|
| Background-clip | 은 배경의 그리기 영역을 지정합니다. | 3 |
| background-origin | 배경 이미지의 위치 지정 영역을 지정합니다. | 3 |
| background-size | 배경 이미지의 크기를 지정합니다. | 3 |
![프론트엔드 프로젝트 - Shangyou [HTML/CSS/JS 기술 종합실습]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![제로 기반 프론트엔드 과정 [Vue 고급 학습 및 실무 적용]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![웹 프론트엔드 튜토리얼 [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost 실무 응용 [api, 인터페이스, 자동화 테스트, 모의]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
