操作方法
对于背景图片的导入，可以选择background 或者background-image 格式如下 body{backgroud:url("url")} body{backgroud-image:url("url")} background: url(http://exp.bdstatic.com/static/common-jquery/widget/search-box/img/logo_83ae7e2.png);
背景图片的显示方式： repeat : 默认值，背景图像在纵向和横向上平铺 no-repeat : 背景图像不平铺 repeat-x : 背景图像仅在横向上平铺 repeat-y : 背景图像仅在纵向上平铺 代码如下（保存为html文档后用浏览器运行） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>background_picture</title> <style> body { background-image:url('http://static.wenku.bdimg.com/static/wkcommon/widget/header/search_box/images/logo-wk-137-46_8c9a463.png'); background-repeat:no-repeat; background-position:left top; } </style> </head> <body> <h1>Modify</h1> <p>no-repeat</p> </body> </html>
由上个例子我们可以发现，其实可以对背景图片进行位置的定位： background-position： top left,； top righ；, bottom right； bottom left; 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>background_picture</title> <style> body { background-image: url('http://static.wenku.bdimg.com/static/wkcommon/widget/header/search_box/images/logo-wk-137-46_8c9a463.png'), url('http://exp.bdstatic.com/static/common-jquery/widget/search-box/img/logo_83ae7e2.png'); background-repeat: no-repeat, no-repeat; background-position: right top, left top; } </style> </head> <body> <h1>Modify</h1> <p>background-position</p> <p>right top and left top</p> </body> </html>
所以可以对，background picture设置大小，首先设置窗口大小： 格式： width：numbers unit (px) height：numbers unit (px) 实例代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>background_picture</title> <style> body { background-image: url('http://static.wenku.bdimg.com/static/wkcommon/widget/header/search_box/images/logo-wk-137-46_8c9a463.png'), url('http://exp.bdstatic.com/static/common-jquery/widget/search-box/img/logo_83ae7e2.png'); background-repeat: no-repeat, no-repeat; width: 300px, 300px; height: 280px, 280px; background-position: right top, left top; background-size: contain, contain; } </style> </head> <body> <h1>Modify</h1> <p>background-size</p> <p>width and height</p> </body> </html>
我们发现对background-size的设置有 cover、contain等参数。 cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器； contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。 实例代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>background_picture</title> <style> body { background-image: url('http://static.wenku.bdimg.com/static/wkcommon/widget/header/search_box/images/logo-wk-137-46_8c9a463.png'), url('http://exp.bdstatic.com/static/common-jquery/widget/search-box/img/logo_83ae7e2.png'); background-repeat: no-repeat, no-repeat; width: 300px, 300px; height: 280px, 280px; background-position: right top, left top; background-size: contain, cover; } </style> </head> <body> <h1>Modify</h1> <p>background-size</p> <p>width and height</p> </body> </html>
对图片进行放大与缩小 使用background-size：percentage 代码实例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>background_picture</title> <style> body { background-image: url('http://static.wenku.bdimg.com/static/wkcommon/widget/header/search_box/images/logo-wk-137-46_8c9a463.png'), url('http://exp.bdstatic.com/static/common-jquery/widget/search-box/img/logo_83ae7e2.png'); background-repeat: no-repeat, no-repeat; background-position: 50% 50%, 100% 100%; background-size: contain, cover; } </style> </head> <body> <h1>Modify</h1> <p>background-size</p> </body> </html> 格式如下： background-position : length || length background-position : position || position background-position-x : length | left | center | right background-position-y : length | top | center | bottom