CSS中的背景

我觉得这个和字体差不多，我们可以自己想一下，背景里面有什么？

第一就是背景是照片还是颜色，所以背景里面肯定有color和img，还有如果是颜色那么肯定是整个背景，而图片万一大小不是和背景一样大呢？这就是要设置照片在背景中的位置，还有呈现方式，这就是另外两个属性repeat和position．

 

背景颜色

background-color:属性值

颜色的属性值有很多中写法,看实际开发需要.

 

背景照片

background-image:url(图片位置)

在CSS中默认图片是呈现水平和垂直平铺的

 

背景平铺

background－repeat：属性值

属性值有：水平和垂直平铺（repeat）、不平铺（no-repeat）、水平平铺（repeat-x）、垂直平铺（repeat-y）

 

背景位置

background-position：属性值（水平位置）、属性值（垂直位置）

背景位置的属性值可以使用方位名词或者数字+px

方位名词：水平（左left、中center、右right）、垂直（上top、中center、下button）

数字+px：这个这里有个技巧就是如果是负数，那么丢弃的部分不会显示出来。

 

连写技巧：color image repeat position

 

背景

设置背景图片大小（background-size），这个应该放在背景那里展示，以后移动

通常在开发中背景图片的大小并不是和盒子一米一样大，这时需要开发人员进行手动设置。

属性名：background-size

属性值：container(背景图片的长宽与盒子内容的长宽相同)、cover(只有有一边相同即可)

 

 

？现在我们学会了在一个网页中如果要显示图片有两个方法，第一个是直接img标签，另一个是设置div+背景图片

那么他们之间的区别呢？

img会默认显示照片的大小，而background-image需要设置div的宽高里面的图片才会显示，因为CSS只是给html装饰的，并不能凭空创造内容。