CSS 背景

　　CSS 可以添加背景颜色和背景图片，以及来进行图片设置。

　　说明：

样式	说明
background-color	定义背景颜色
background-image	定义背景图片
background-repeat	定义背景图是否平铺和平铺方式
background-position	定义背景图片位置
background-attachment	定义背景图显示方式
background-size	定义背景图的大小
background-clip	定义背景的裁剪区域
background-origin	定义背景的显示区域

一、background-color 背景颜色

　　可以使用该属性给一个元素定义背景颜色。

　　语法：

background-color: color值;

　　color 值可以是颜色单词，十六进制等 W3C 允许的颜色值。

　　背景透明（CSS3）：

　　语法：

background: rgba(0,0,0,0.3);

　　    最后一个参数是alpha 透明度 取值范围 0~1之间。

　　 Tips： 背景半透明是指盒子背景半透明， 盒子里面的内容不收影响。

二、background-image 背景图像

　　该样式属性用于设置背景图片。

　　语法：

background-image : none | url (url) 

• •    none：表示默认值，没有背景图；
  •     url : 　使用绝对或相对地址指定背景图像；

　　Tips：background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。

　　　　   如果图片不重复的话，图片覆盖不到的地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。

　　扩展：

　　　　GIF 格式图像可以设计动画、透明背景，图像小巧等优点；

　　　　JPG 格式图像具有更丰富的颜色数，图像品质相对要好；

　　　　PNG 类型综合了 GIF 和 JPG 两种图像的优点，不足就是占用空间相对要大。

三、background-repeat 背景平铺

　　该样式属性用于设置背景图片的平铺方式。

　　语法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y | round | space

• • 　   repeat : 　背景图像在纵向和横向上平铺（默认的）
    
  •      no-repeat : 　背景图像不平铺
  •      repeat-x : 　背景图像在横向上平铺
  •      repeat-y : 　背景图像在纵向平铺
  • 　 round：背景图像自动缩放直到适应且充满整个容器。（仅 CSS3 支持）
  •      space：背景图像以相同的间距平铺且填充满整个容器或某个方向。（仅CSS3支持）　
  •      设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。

四、background-position 背景位置

　　该属性用于设置背景图片的位置。

　　语法：

background-position : length || length

background-position : position || position 

• • 　 length : 　百分数 | 由浮点数字和单位标识符组成的长度值。
  •     position : 　top | center | bottom | left | center | right （方位名词）

　　说明：

　　　　设置或检索对象的背景图像位置时，必须先指定background-image属性。默认值为：(0% 0%)。

　　　　如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。

　　注意：

　　　　1. position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。

　　　　2. 如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top; 则 15px 一定是 x坐标 top是 y坐标。

　　　　3. 方位名字可以没有顺序，但是精切单位第一个为 x 坐标，第二个 为 y 坐标。

　　扩展：在网页中的坐标轴和现实生活中的坐标轴不同。在网页中左上角为原点，X 轴的正方向指向右方，Y 轴的正方向指向下方，Z 轴的正方向是从屏幕向外的。

　　　　　在给背景图指定位置时，一定到注意到方向和正负值。

　　

 

五、background-attachment 背景附着

　　如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

　　通过 该属性可以 防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响。

　　语法：

background-attachment : scroll | fixed | local 

• • 　　scroll : 　背景图像是随对象内容滚动，默认值
  •       fixed : 　背景图像固定
  •       local： 背景图图像相对于元素内容固定，就是当元素内容滚动时背景图像也会跟着滚动，此时不管元素本身是否滚动，当元素显示滚动条时才会看到效果。（仅CSS3支持）
  •       设置或检索背景图像是随对象内容滚动还是固定的。

六、background 背景简写

　　background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：

　　background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

background: color url(image.jpg) repeat-y  scroll 50% 0 ;

七、background-size 背景缩放（CSS3）

　　通过该属性设置背景图片的尺寸，就像设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。

　　语法：

background-image: url('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain; */
/* background-size: cover; */

• • 　　可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）
    
  •      设置为 cover 时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。平时用的cover 最多。
  •      设置为 contain 会自动调整缩放比例，保证图片始终完整显示在背景区域

八、多背景(CSS3)

　　CSS3 支持多背景图的。以逗号分隔可以设置多背景，可用于自适应布局，每个url 用逗号隔开就好了。

　　语法：

background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px  ,
	   url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,
	   url(test1.jpg) no-repeat scroll 10px 20px/110px 130px #aaa;

• • 　　一个元素可以设置多重背景图像。
    
  •      每组属性间使用逗号分隔。
  •      如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
  •      为了避免背景色将图像盖住，背景色通常都定义在最后一组上。

九、background-clip 背景裁剪（CSS3）

　　该属性定义背景图像的裁剪区域。

　　语法：

background-clip: border-box | padding-box | content-box | text;

• • 　　border-box：从边框区域向外裁剪背景；（默认值）
  •      padding-box：从补白区域向外裁剪背景；
  •      content-box：从内容区域向外裁剪背景；
  •     text：从前景内容区域向外裁剪背景；

十、background-origin 背景坐标（CSS3）

　　background-position 这个属性总是根据元素左上角为坐标原点进行定位背景图像。使用 background-origin 属性可以改变这种定位方式。

　　语法：

background-origin: border-box | padding-box | content-box;

• • 　　border-box：从边框区域开始显示背景；
    
  •      padding-box：从补白区域开始显示背景；（默认值）
  •      content-box：仅在内容区域显示背景；

 

来源：https://www.cnblogs.com/niujifei/p/11113020.html