CSS3背景CSS3包含多个新的背景属性,它们提供了对背景更强大的控制。
属性:background-size,background-origin
浏览器支持:Internet Explorer9+、Firefox、Chrome、Safari以及Opera支持新的背景属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ background: url(./raw/face.jpg); background-size: 100px 100px; -moz-background-size: 100px 100px; background-repeat: no-repeat; padding-top: 100px; } </style> </head> <body> <p>这个是缩小的图片</p> <p>原始图片:<img src="./raw/face.jpg" ></p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ height: 100px; border: 1px solid red; padding: 35px; background-image: url(./raw/face.jpg); background-repeat: no-repeat; background-position: left; background-size: 100px 100px; } #box1{ background-origin: border-box; } #box2{ background-origin: content-box; } </style> </head> <body> <p>border-box</p> <div id="box1"> 前世的他,一心钻研,不问世事,那也是他最快乐的时光,但这一世,他注定会忙碌,会奔波。 </div> <p>content-box</p> <div id="box2"> “会的,总有一天会的,一旦等天武大陆安宁下来,我们便可以回到天雷城安静的修炼,安静的生活。” </div> <p>原始的</p> <div> 秦尘静静的看着远处的城市,突然想到陈思思,心中有了丝丝的悸动。 </div> </body> </html>