CSS3? ??? ?? ??
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中文網(wǎng)(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中文網(wǎng)(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中文網(wǎng)(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>
