您的位置:首页 > Web前端 > CSS

CSS background-image背景图片相关介绍

2018-01-09 16:59 309 查看
原文链接:http://www.cnblogs.com/polk6/p/6066642.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 设置单个背景图片

说明:默认情况下背景图片进行横向和纵向平铺。



 


2.2 设置多个背景图片

说明:渲染时前面的背景图片在上层、后面的背景图片在下层。



 


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

说明:设定背景图片水平、垂直平铺。

示例



 


3.2 background-repeat:space | round | no-repeat

说明:设置背景图片的其他平铺效果。

示例: 



 


4. background-attachment :设置背景图片是否固定或随着滚动移动

说明:设置背景图片是否固定或随着滚动移动。

语法<attachment> [ , <attachment> ]*
<attachment> = scroll | fixed | local


默认值:scroll // 背景图片跟随滚动条一直滚动

扩展W3C规范MDN资料


4.1  background-attachment:scroll; // 跟随滚动条一直滚动。(默认) 



 


4.2 background-attachment:local; // 跟随内容一起滚动



 


5. background-position :设置背景图片的位置

说明:设置背景图片的位置,可设置背景图片的4个边角水平和纵向的起始位置。

语法:<position> [ , <position> ]*

默认值:0% 0% // 背景图片左上角定位于容器左上角

扩展W3C规范MDN资料


5.1 background-position:10px; // 背景图片水平方向与左边缘相距10px,垂直居中



 


5.2 background-position:10px 20px; // 背景图片水平方向与左边缘相距0px,垂直方向与顶部边缘相距20px



 


5.3 background-position:left 10px bottom 20px; // 背景图片水平方向与左边缘相距10px,垂直方向与底部边缘相距20px



 


6. background-size :设置背景图片的大小

说明:设置背景图片的大小。

语法<bg-size> [ , <bg-size> ]*
<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain


默认值:auto auto // 背景图片的原始大小

扩展W3C规范MDN资料

示例



 


7. 在线示例

地址:http://www.akmsg.com/WebDemo/CSS3-background-image.html
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: