一真的小站

鳶飛魚躍,無處不是化境。

0%

十六、背景样式

十六、背景样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*1.添加背景颜色*/
/*background-color:skyblue;*/
/*2.添加背影图片
如果图片大于容器,那么默认就从容器左上角开始放置
如果图片小于容器,那么图片默认会平铺*/
/*background-image:url("../images/bg-img.jpg");*/
background-image:url("../inages/sharel.png");
/*3.设置背景平铺
round:会将图片进行缩放之后再平铺
space:图片不会缩放平铺,只是会在图片之间产生相同的间距值*/
/*background-repeat:space;*/
/*4.设置在滚动容器的背景的行为:跟随滚动/固定fixed:背景图片的位置固定不变
scro11:当滚动容器的时候,背景图片也会跟随滚动*/
/*local和scro11的区别:前提是滚动当前容器的内容
loca1:背景图片会跟随内容一起滚动
scro11:背景图片不会跟随内容一起滚动*/
background-attachment:scroll;

background-size属性

CSS里的background-size属性能够让程序员决定如何在指定的元素里展示,它通过改变背景尺寸的通过各种不同是属性值改变背景尺寸呈现的大小。往往建议不要将图放大,如果有需要,尽量让图缩小

语法

对象 定义
background-size:auto 原始图片大小
number 具体数值
percentage 百分比0-100%
cover 放大铺满
contain 缩小铺满

cover与contain刚好相反,背景图片会按比例缩放自适应整个背景区域,如果背景区域不足以包含所有背景图片,图片内容会溢出

1.图片大于容器:等比例缩小,会填满整个背景区域,有可能造成图片的某些区域不可见

2.图片小于容器:等比例放大,填满整个背景区域,图片有可能造成某个方向上内容的溢出