CSS3 배경

CSS3 Background

CSS3에는 배경 요소를 더욱 효과적으로 제어할 수 있는 몇 가지 새로운 배경 속성이 포함되어 있습니다.

이 장에서는 다음 배경 속성에 대해 배웁니다.

배경-이미지배경-크기배경-원산지 배경-클립

여러 배경 이미지를 사용하는 방법도 배웁니다.

CSS3 background-image 속성

CSS3에서는 background-image 속성을 통해 배경 이미지를 추가할 수 있습니다.

다양한 배경 이미지와 이미지는 쉼표로 구분되며, 모든 이미지의 상단에 표시되는 이미지가 첫 번째 이미지입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
#example1 {
    background-image: url(../style/images/img_flwr.gif), url(../style/images/paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    padding: 15px;
}
</style>
</head>
<body>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>

다양한 이미지에 여러 가지 속성을 설정할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
#example1 {
    background: url(../style/images/img_flwr.gif) right bottom no-repeat, url(../style/images/paper.gif) left top repeat;
    padding: 15px;
}
</style>
</head>
<body>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>

CSS3 배경 크기 속성

배경 크기는 배경 이미지의 크기를 지정합니다. CSS3 이전에는 배경 이미지 크기가 이미지의 실제 크기에 따라 결정되었습니다.

배경 이미지는 CSS3에서 지정할 수 있으므로 다양한 환경에서 배경 이미지의 크기를 다시 지정할 수 있습니다. 크기를 픽셀 또는 백분율로 지정할 수 있습니다.

지정하는 크기는 상위 요소의 너비와 높이의 백분율입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style> 
body
{
background:url(../style/images/img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
padding-top:40px;
}
</style>
</head>
<body>
<p>
Lorem ipsum，中文又称“乱数假文”， 是指一篇常用于排版设计领域的拉丁文文章 ，主要的目的为测试文章或文字在不同字型、版型下看起来的效果。
</p>
<p>原始图片: <img src="http://img.taopic.com/uploads/allimg/140724/235067-140H402343186.jpg"  alt="Flowers" width="224" height="162"></p>
</body>
</html>

CSS3의 background-Origin 속성

background-Origin 속성은 배경 이미지의 위치 영역을 지정합니다.

배경 이미지는 콘텐츠 상자, 패딩 상자, 테두리 상자 영역에 배치할 수 있습니다.

CSS3 다중 배경 이미지

CSS3을 사용하면 요소

에 여러 배경 이미지를 추가할 수 있습니다.

CSS3 배경 클립 속성

CSS3의 background-clip 배경 클리핑 속성은 지정된 위치에서 그리기를 시작합니다.

새로운 배경 속성 序 Sequence

설명

CSS

BACKROUND-CLIP은 배경 그리기 영역을 지정합니다. 3

Background-Origin은 배경 그림의 위치 지정 영역을 지정합니다. 3

Background-size는 배경 그림의 크기를 지정합니다. ~

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> body { background:url(../style/images/img_flwr.gif); background-size:80px 60px; background-repeat:no-repeat; padding-top:40px; } </style> </head> <body> <p> Lorem ipsum，中文又称“乱数假文”，是指一篇常用于排版设计领域的拉丁文文章，主要的目的为测试文章或文字在不同字型、版型下看起来的效果。 </p> <p>原始图片: <img src="http://img.taopic.com/uploads/allimg/140724/235067-140H402343186.jpg" alt="Flowers" width="224" height="162"></p> </body> </html>

코드 재설정

자동운전

제출하다

시사 Clear