CSS背景-background

  • 复合属性—background

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

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

只要将背景设置为图片,那么我们就要思量以下多少个属性了。

background-repeat:

repeat-x:横向平铺

 

图片 1

repeat-y:纵向平铺

 

图片 2

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

 

图片 3

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

 

图片 4

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

 

图片 5

no-repeat:不平铺

 

图片 6

background-size:

不无多少个参数,值不仅能够是px也足以是%大概是auto(暗许)。若独有二个参数,则为宽度,中度等比例缩放,假诺背景图片的尺寸当先容器,将会被裁切。若有五个参数,则为宽高。

cover:背景图像等比缩放到完全覆盖容器,背景图像有望超过容器,然则超越的有的将会被裁切。

 

图片 7

contain:此属性值可以将背景图片等比例放大或然缩短。contain只供给某八个方位元帅容器覆盖,比如纵向可能横向可以最小程度将容器覆盖。

 

图片 8

background-position:鲜明背景图片的职位

background-position : length || position

length:<percentage> | <length>

position:left center|left top| ……

1、background-position:0 0;
背景图片的左上角将与容器元素的左上角对齐。该装置与background-position:left
top;也许background-position:0%
0%;设置的作用是同等的。该属性定位不受成分的
padding影响,比如,大家给容器成分扩充padding值,只是影响了容器成分的惊人和宽窄,背景图片的左上角照旧与容器成分的左上角对齐。

 

图片 9

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

图片以容器左上角为参照他事他说加以考察向左偏移10px,向上偏移 20px,

 

图片 10

3、background-position:50% 50%;

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

平等x:{容器(container)的拉长率—背景图片的增进率}*x百分比,超过的有的隐蔽。
同一y:{容器(container)的莫斯中国科学技术大学学—背景图片的惊人}*y百分比,超过的部分掩饰。

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

 

图片 11

4、background-position:100% 100%;

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

 

图片 12

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

scroll:暗许值,背景图相对于元素固定,背景随页面滚动而活动,即背景和内容绑定。

 

图片 13

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

 

图片 14

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

 

图片 15

local:背景图相对于成分内容稳固。

背景图片会随着页面别的部分的轮转而移动。但如若剧情是能够滚动的要素(设置为overflow:scroll的成分),背景图会随成分内容的轮转而滚动,因为背景图是相对于成分自己内容稳固,开头定点,成分出现滚动条后背景图随内容而滚动。

 

图片 16

那就是关于background这些复合属性的一部分基本知识啦~