CSS 背景
这阵子又贪玩了。没有继续下去。。。。。
罪过罪过~~~
知识的积累总是厚积而薄发,坚持下去总会有个好结果的,慢慢补上吧!
一、背景图像效果
1、背景图像基础
①简写方式:background:url("1.jpg") no-repeat #00ff00 20px 30px ;
② 背景的定位问题
![](https://images2015.cnblogs.com/blog/685629/201509/685629-20150925123329397-1781831148.png)
③背景进行定位时,像素数值和百分比不要混用。
2、CSS3中的一些属性总结
常用的属性:background、background-color、background-image、background-repeat、background-attachment、background-position
background-origin、background-clip、background-size;
①background-image : url1, [url2, url3....]
用于多张背景图片的使用。当背景图片与背景色同时存在时,背景图在背景色之上。
②background-repeat : repeat-x [repeat-y, repeat, no-repeat, round, space]
round: 背景图像自动缩放直到适应且填充满整个容器。
space:背景图像以相同的间距平铺且填充满整个容器的方向。
③background-attachment : fixed [scroll, local] 设置背景图像是随对象内容滚动还是固定的
fixed : 背景图像相对于窗体固定。
scroll : 背景图像相对于元素固定,也就是说当元素内容滚动时背景图像不会跟着滚动,因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
local :背景图像相对于元素内容固定,也就是说当元素随元素滚动时背景图像也会跟着滚动,因为背景图像总是要跟着内容。(CSS3)。
④background-position:percentage [length, center, left, right, top, bottom]
用于定位背景图像。参数一般为两个,CSS3中规定可以使用3个或者4个,但浏览器支持情况较少。
⑤background-origin:padding-box [border-box,content-box]
用于设置背景图像的参考原点。
padding-box:从padding【含padding】 部分开始显示背景图像。【默认】
border-box:从border【含border】r部分开始显示背景图像。
content-box:从content【含content】t部分开始显示背景图像。
⑥background-clip:border-box [padding-box, content-box]
padding-box: 从padding区域(不含padding)开始向外裁剪背景border-box: 从border区域(不含border)开始向外裁剪背景content-box:从content区域开始向外裁剪背景这个属性,往往要配合background-origin同时使用。
⑦background-size:auto [length, percentage, cover, contain]
length:用长度值指定背景图片大小,当为单一值时,图像根据这一值进行等比缩放。
percentage : 用百分比指定图片大小,当为单一值时,图像根据这一值进行等比缩放。
cover :将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。
contain:将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。