css设置背景图片大小
网页的某些装饰可以通过背景图片来渲染，使得网页更加美观，CSS设置背景图片，不仅仅是大小，还有位置，放大方式，透明化之类。都是必备的CSS技能。层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。演示实例如下：
操作方法
- 01
对于背景图片的导入，可以选择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);
- 02
背景图片的显示方式： 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>
- 03
由上个例子我们可以发现，其实可以对背景图片进行位置的定位： 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>
- 04
所以可以对，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>
- 05
我们发现对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>
- 06
对图片进行放大与缩小 使用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
