CSS3에서는 배경을 일부 변경했습니다. 가장 눈에 띄는 점은 4개의 새로운 속성을 추가할 뿐만 아니라 현재 속성을 조정하고 향상시키는 것입니다.
여러 배경 이미지
css3에서는 하나의 태그 요소에 여러 배경 이미지를 적용할 수 있습니다. 코드는 css2.0 버전과 유사하지만 참조된 이미지를 "," 쉼표로 구분해야 합니다. 첫 번째 이미지는 요소 상단에 위치한 배경이고, 그 아래에 다음과 같은 배경 이미지가 차례로 표시됩니다.
background-image: url(top-image.jpg), url(middle -image.jpg), url(bottom-image.jpg);
새 속성: 배경 클립
(1) background-clip: border; 배경이 테두리 테두리 아래에 표시되기 시작합니다.
(2) background-clip: padding; 테두리 테두리 아래가 아님
(3) background-clip: content; 배경은 테두리나 패딩 아래가 아닌 콘텐츠 영역 아래에 표시되기 시작합니다.
(4)Background-clip: no-clip;기본 속성 값, background-clip과 유사: border;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
.back {
border: 10px dotted black;
padding: 35px;
background: blue;
}
.back1 {
border: 10px dotted black;
padding: 35px;
background: blue;
background-clip: padding-box;
}
.back2 {
border: 10px dotted black;
padding: 35px;
background: blue;
background-clip: content-box;
}
</style>
</head>
<body>
<div class="back"></div>
<br>
<div class="back1"></div>
<br>
<div class="back2"></div>
<br>
</body>
</html>새 속성: Background Origin
이 속성은 배경 위치와 함께 사용해야 합니다. background-position을 사용하여 테두리, 패딩 또는 콘텐츠 상자 콘텐츠 영역에서 위치를 계산할 수 있습니다. (배경 클립과 유사)
(1) background-origin: 테두리 테두리 위치에서 계산
(2) background-origin: 패딩 위치에서 계산
(3) background-origin: 콘텐츠; 콘텐츠 상자 콘텐츠 영역의 위치부터 계산
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
.sample1,.sample2,.sample3{
margin:20px;
padding:15px;
border: dashed 15px #993300;
width:450px;
height:150px;
color:#fff;
background:url(https://img.php.cn/upload/course/000/000/008/5801821694a3b224.jpg) no-repeat;
}
.sample1 {
-moz-background-origin:border;
background-origin:border-box;
}
.sample2 {
-moz-background-origin:padding;
background-origin:padding-box;
}
.sample3 {
-moz-background-origin:content;
background-origin:content-box;
}
</style>
</head>
<body>
<div class="sample1"></div>
<br>
<div class="sample2"></div>
<br>
<div class="sample3"></div>
<br>
</body>
</html>새 속성: 배경 크기
배경 크기 속성은 배경 이미지를 재설정하는 데 사용됩니다. 여러 속성 값이 있습니다:
(1) background-size: contain; 레이블 요소에 맞게 배경 이미지를 줄입니다(주로 픽셀 비율)
(2) background-size: 배경 이미지를 확대합니다. 전체 라벨 요소 크기(주로 픽셀 비율)로 확장됩니다.
(3) background-size: 100px 100px 배경 이미지 크기 조정
(4) background-size: 50% 100%; 콘텐츠 태그 요소의 크기에 따라 이미지의 크기를 조정하는 것입니다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
body
{
background:url(https://img.php.cn/upload/course/000/000/008/5801821694a3b224.jpg);
background-size:100px 60px;
background-repeat:no-repeat;
padding-top:40px;
}
</style>
</head>
<body>
<p>
<img src="https://img.php.cn/upload/course/000/000/008/5801821694a3b224.jpg" alt="CSS3" width="400" height="200">
</p>
<p>上面两个图片对比</p>
</body>
</html>