CSS background-image背景图片相关介绍
2018-01-09 16:59
309 查看
原文链接:http://www.cnblogs.com/polk6/p/6066642.html
这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺、拉伸、偏移、设置大小等操作。
CSS中设置元素背景图片及其背景图片样式的属性主要以下几个:
background-image :设置元素的背景图片。
background-repeat :设置如何平铺背景图片。
background-attachment :设置背景图片是否固定或随着滚动移动。
background-position :设置背景图片的位置。
background-size :设置背景图片的大小。
下面将详细说明各属性。
说明:可设置元素的1个或多个背景图片。
语法:<bg-image> [ , <bg-image> ]* | none
默认值:none。 // 不设置元素的背景图片。
扩展:W3C规范、MDN资料
说明:默认情况下背景图片进行横向和纵向平铺。
![](https://images2015.cnblogs.com/blog/153475/201611/153475-20161120151123263-884902941.png)
说明:渲染时前面的背景图片在上层、后面的背景图片在下层。
![](https://images2015.cnblogs.com/blog/153475/201612/153475-20161201213253349-116430688.png)
说明:设置背景图片的平铺效果,包括水平、垂直。
语法:<repeat-style> [ , <repeat-style> ]*
默认值:repeat //水平和垂直平铺
扩展:W3C规范、MDN资料
说明:设定背景图片水平、垂直平铺。
示例:
![](https://images2015.cnblogs.com/blog/153475/201612/153475-20161205132629054-916756064.png)
说明:设置背景图片的其他平铺效果。
示例:
![](https://images2015.cnblogs.com/blog/153475/201612/153475-20161205132905429-1138839250.png)
说明:设置背景图片是否固定或随着滚动移动。
语法:<attachment> [ , <attachment> ]*
默认值:scroll // 背景图片跟随滚动条一直滚动
扩展:W3C规范、MDN资料
![](https://images2015.cnblogs.com/blog/153475/201612/153475-20161204175147927-1670812510.gif)
![](https://images2015.cnblogs.com/blog/153475/201612/153475-20161204175155474-565254516.gif)
说明:设置背景图片的位置,可设置背景图片的4个边角水平和纵向的起始位置。
语法:<position> [ , <position> ]*
默认值:0% 0% // 背景图片左上角定位于容器左上角
扩展:W3C规范、MDN资料
![](https://images2015.cnblogs.com/blog/153475/201612/153475-20161201223050349-886933991.png)
![](https://images2015.cnblogs.com/blog/153475/201612/153475-20161201223801849-886934060.png)
![](https://images2015.cnblogs.com/blog/153475/201612/153475-20161205133426804-756588177.png)
说明:设置背景图片的大小。
语法:<bg-size> [ , <bg-size> ]*
默认值:auto auto // 背景图片的原始大小
扩展:W3C规范、MDN资料
示例:
![](https://images2015.cnblogs.com/blog/153475/201612/153475-20161201231022615-836484381.png)
地址:http://www.akmsg.com/WebDemo/CSS3-background-image.html
这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺、拉伸、偏移、设置大小等操作。
1. 背景图片样式分类
CSS中设置元素背景图片及其背景图片样式的属性主要以下几个:background-image :设置元素的背景图片。
background-repeat :设置如何平铺背景图片。
background-attachment :设置背景图片是否固定或随着滚动移动。
background-position :设置背景图片的位置。
background-size :设置背景图片的大小。
下面将详细说明各属性。
2. background-image :设置元素的背景图片
说明:可设置元素的1个或多个背景图片。语法:<bg-image> [ , <bg-image> ]* | none
默认值:none。 // 不设置元素的背景图片。
扩展:W3C规范、MDN资料
2.1 设置单个背景图片
说明:默认情况下背景图片进行横向和纵向平铺。![](https://images2015.cnblogs.com/blog/153475/201611/153475-20161120151123263-884902941.png)
2.2 设置多个背景图片
说明:渲染时前面的背景图片在上层、后面的背景图片在下层。![](https://images2015.cnblogs.com/blog/153475/201612/153475-20161201213253349-116430688.png)
3. background-repeat :设置背景图片的平铺效果
说明:设置背景图片的平铺效果,包括水平、垂直。语法:<repeat-style> [ , <repeat-style> ]*
<repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
默认值:repeat //水平和垂直平铺
扩展:W3C规范、MDN资料
3.1 background-repeat:repeat-x | repeat-y | repeat-x | repeat-y
说明:设定背景图片水平、垂直平铺。示例:
![](https://images2015.cnblogs.com/blog/153475/201612/153475-20161205132629054-916756064.png)
3.2 background-repeat:space | round | no-repeat
说明:设置背景图片的其他平铺效果。示例:
![](https://images2015.cnblogs.com/blog/153475/201612/153475-20161205132905429-1138839250.png)
4. background-attachment :设置背景图片是否固定或随着滚动移动
说明:设置背景图片是否固定或随着滚动移动。语法:<attachment> [ , <attachment> ]*
<attachment> = scroll | fixed | local
默认值:scroll // 背景图片跟随滚动条一直滚动
扩展:W3C规范、MDN资料
4.1 background-attachment:scroll; // 跟随滚动条一直滚动。(默认)
![](https://images2015.cnblogs.com/blog/153475/201612/153475-20161204175147927-1670812510.gif)
4.2 background-attachment:local; // 跟随内容一起滚动
![](https://images2015.cnblogs.com/blog/153475/201612/153475-20161204175155474-565254516.gif)
5. background-position :设置背景图片的位置
说明:设置背景图片的位置,可设置背景图片的4个边角水平和纵向的起始位置。语法:<position> [ , <position> ]*
默认值:0% 0% // 背景图片左上角定位于容器左上角
扩展:W3C规范、MDN资料
5.1 background-position:10px; // 背景图片水平方向与左边缘相距10px,垂直居中
![](https://images2015.cnblogs.com/blog/153475/201612/153475-20161201223050349-886933991.png)
5.2 background-position:10px 20px; // 背景图片水平方向与左边缘相距0px,垂直方向与顶部边缘相距20px
![](https://images2015.cnblogs.com/blog/153475/201612/153475-20161201223801849-886934060.png)
5.3 background-position:left 10px bottom 20px; // 背景图片水平方向与左边缘相距10px,垂直方向与底部边缘相距20px
![](https://images2015.cnblogs.com/blog/153475/201612/153475-20161205133426804-756588177.png)
6. background-size :设置背景图片的大小
说明:设置背景图片的大小。语法:<bg-size> [ , <bg-size> ]*
<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain
默认值:auto auto // 背景图片的原始大小
扩展:W3C规范、MDN资料
示例:
![](https://images2015.cnblogs.com/blog/153475/201612/153475-20161201231022615-836484381.png)
7. 在线示例
地址:http://www.akmsg.com/WebDemo/CSS3-background-image.html
相关文章推荐
- CSS background-image背景图片相关介绍
- 按钮的背景图片根据状态的不同而显示不同的图片,网上有介绍相关的方法。
- CSS background-color 、image 背景图片
- delphi从imagelist中获取透明背景图片的方法
- Android开发中ImageLoder加载网络图片时将图片设置为ImageView背景的方法
- 【第五篇】Volley代码修改之图片二级缓存以及相关源码阅读(重写ImageLoader.ImageCache)
- Android中的ImageView的getDrawableCache获取背景图片的时候注意的问题
- 独立宣言背景及相关介绍
- css background之设置图片为背景技巧
- iOS开发——多线程篇——快速生成沙盒目录的路径,多图片下载的原理、SDWebImage框架的简单介绍
- css3实现一个div设置多张背景图片及background-image属性
- image-set实现Retina屏幕下图片显示详细介绍
- android网络上获取图片作为ImageButton和ImageView的背景
- android <ImageButton>设置背景图片无法显示
- Cordova各个插件使用介绍系列(三)—$cordovaImagePicker从手机图库选择多张图片
- Android布局自定义Shap圆形ImageView,可以单独设置背景与图片
- css样式教程---css控制背景图片-背景相关的css
- IE显示背景图片background-image,FireFox不显示背景图片或显示不正常
- HTML中背景图片的相关内容
- Swift中tableViewCelll和ImageView中图片背景显示的问题