CSS3 ??
CSS3 Background
CSS3 Background
CSS3?? ?? ??? ?? ????? ??? ? ?? ? ?? ??? ?? ??? ???? ????.
? ???? ?? ?? ??? ?? ????.
??-?????-????-??? ??-??
?? ?? ???? ???? ??? ????.
CSS3 background-image ??
CSS3??? background-image ??? ?? ?? ???? ??? ? ????.
??? ?? ???? ???? ??? ????, ?? ???? ??? ???? ???? ? ?? ??????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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中文網(wǎng)(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中文網(wǎng)(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，中文又稱“亂數(shù)假文”， 是指一篇常用于排版設(shè)計領(lǐng)域的拉丁文文章 ，主要的目的為測試文章或文字在不同字型、版型下看起來的效果。
</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? ?? ??? ??? ?????. ~
