纵向平铺,若是将背景设置为图片

  • 复合属性—background
  • 复合属性—background

假使同时设置了background-color和background-image时,背景颜色会被图片覆盖。

若果还要设置了background-color和background-image时,背景颜色会被图片覆盖。

background-image: 用作背景的图片,background:url( );

background-image: 用作背景的图样,background:url( );

假诺将背景设置为图片,那么我们就要考虑以下几性情格了。

一旦将背景设置为图片,那么大家即将考虑以下几个属性了。

background-repeat:

background-repeat:

repeat-x:横向平铺

repeat-x:横向平铺

 

 

图片 1

图片 2

repeat-y:纵向平铺

repeat-y:纵向平铺

 

 

图片 3

图片 4

round:背景图像自动缩放直到适应且填充满整个容器。

round:背景图像自动缩放直到适应且填充满整个容器。

 

 

图片 5

图片 6

space:背景图像以相同的间隔平铺且填充满整个容器或某些方向。

space:背景图像以相同的间隔平铺且填充满整个容器或有些方向。

 

 

图片 7

图片 8

repeat:背景图像在横向和纵向平铺,私行认同值。

repeat:背景图像在横向和纵向平铺,暗中认可值。

 

 

图片 9

图片 10

no-repeat:不平铺

no-repeat:不平铺

 

 

图片 11

图片 12

background-size:

background-size:

有着多个参数,值既能够是px也可以是%恐怕是auto(暗许)。若只有2个参数,则为宽度,高度等比例缩放,如若背景图片的尺码超过容器,将会被裁切。若有七个参数,则为宽高。

持有七个参数,值既可以是px也能够是%可能是auto(默许)。若唯有二个参数,则为宽度,中度等比例缩放,即便背景图片的尺寸超越容器,将会被裁切。若有五个参数,则为宽高。

cover:背景图像等比缩放到完全覆盖容器,背景图像有可能大于容器,不过超越的一部分将会被裁切。

cover:背景图像等比缩放到完全覆盖容器,背景图像有或然超乎容器,可是超越的片段将会被裁切。

 

 

图片 13

图片 14

contain:此属性值可以将背景图片等比例放大恐怕减少。contain只必要某2个方位司令员容器覆盖,比如纵向只怕横向可以最小程度将容器覆盖。

contain:此属性值可以将背景图片等比例放大只怕裁减。contain只需求某三个方位元帅容器覆盖,比如纵向或然横向可以最小程度将容器覆盖。

 

 

图片 15

图片 16

background-position:显然背景图片的地点

background-position:显然背景图片的职位

background-position : length || position

background-position : length || position

length:<percentage> | <length>

length:<percentage> | <length>

position:left center|left top| ……

position:left center|left top| ……

1、background-position:0 0;
背景图片的左上角将与容器成分的左上角对齐。该装置与background-position:left
top;大概background-position:0%
0%;设置的功能是平等的。该属性定位不受成分的
padding影响,例如,大家给容器元素增加padding值,只是影响了容器成分的万丈和增幅,背景图片的左上角依旧与容器成分的左上角对齐。

1、background-position:0 0;
背景图片的左上角将与容器成分的左上角对齐。该装置与background-position:left
top;只怕background-position:0%
0%;设置的职能是相同的。该属性定位不受成分的
padding影响,例如,大家给容器成分增加padding值,只是影响了容器元素的万丈和宽窄,背景图片的左上角如故与容器成分的左上角对齐。

 

 

图片 17

图片 18

2、background-position:-10px -20px;

2、background-position:-10px -20px;

图形以容器左上角为参考向左偏移10px,向上偏移 20px,

图表以容器左上角为参考向左偏移10px,向上偏移 20px,

 

 

图片 19

图片 20

3、background-position:50% 50%;

3、background-position:50% 50%;

图形水平和垂直居中。与 background-position:center center;效果等同。

图片水平和垂直居中。与 background-position:center center;效果等同。

一律x:{容器(container)的涨幅—背景图片的升幅}*x百分比,超出的一部分隐藏。
无异于y:{容器(container)的中度—背景图片的莫大}*y百分比,超出的局地隐藏。

一致x:{容器(container)的增加率—背景图片的大幅度}*x百分比,超出的有个别隐藏。
相同y:{容器(container)的中度—背景图片的莫大}*y百分比,超出的一些隐藏。

x=(300-178)*50%=61px y=(300-108)*50%=96px

x=(300-178)*50%=61px y=(300-108)*50%=96px

 

 

图片 21

图片 22

4、background-position:100% 100%;

4、background-position:100% 100%;

图形处于容器成分的右下角,与 background-position:right bottom;效果等同。

图片处于容器成分的右下角,与 background-position:right bottom;效果等同。

 

 

图片 23

图片 24

background-attachment:定义用户滚动页面时背景图片会时有暴发什么样。

background-attachment:定义用户滚动页面时背景图片会发出哪些。

scroll:默许值,背景图相对于成分固定,背景随页面滚动而活动,即背景和情节绑定。

scroll:暗中认同值,背景图相对于成分固定,背景随页面滚动而运动,即背景和内容绑定。

 

 

图片 25

图片 26

然而有一种情形不一:对于可以滚动的要素(设置为overflow:scroll的成分)。当background-attachment设置为scroll时,背景图不会随元素内容的滚动而滚动。

不过有一种情形各异:对于可以滚动的要素(设置为overflow:scroll的要素)。当background-attachment设置为scroll时,背景图不会随成分内容的轮转而滚动。

 

 

图片 27

图片 28

fixed:背景图相对于视口固定,即使元素有了滚动条,背景图也不随内容移动,好像背景图片被钉到了视窗上一致。

fixed:背景图相对于视口固定,固然成分有了滚动条,背景图也不随内容移动,好像背景图片被钉到了视窗上一样。

 

 

图片 29

图片 30

local:背景图相对于成分内容定位。

local:背景图相对于成分内容定位。

背景图片会随着页面其他部分的轮转而移动。但如若情节是足以滚动的要素(设置为overflow:scroll的成分),背景图会随元素内容的轮转而滚动,因为背景图是对峙于成分自己内容稳定,开始稳定,成分出现滚动条后背景图随内容而滚动。

背景图片会随着页面其他部分的滚动而移动。但如若情节是足以滚动的要素(设置为overflow:scroll的成分),背景图会随成分内容的轮转而滚动,因为背景图是相对于成分自个儿内容定位,早先定点,成分出现滚动条后背景图随内容而滚动。

 

 

图片 31

图片 32

这就是关于background那些复合属性的局地基本知识啦~

那就是有关background这些复合属性的一对基本知识啦~

相关文章