CSS 4 背景 ①

background - color 设置背景颜色

　<color>

background - color : #ff0000 ; 　　background - color : rgb(255,0,0); 　　　　　　 background - color : rgba(255,0,0,0.5)　　　　　　　　　　background- color : transparent ; (默认）

background - image 设置背景图片

<bg - image > [, <bg - image > ] * 背景图片是可以有多个

<bg - iimage > = < image > | none 设置图片或者不设置图片

可以通过以下几个方法设置图片：

url 　　　　url(" http://163.com/images/x.png")　　　　url("/images/x.png") 　　　 url("../images/x.png") 　　 url(‘../images/x.png‘) 　　 url(../images/x.png)

background-image : url(red.png);　　　　　　background-image : url(red.png); url（blue.png); 　　background-image : url(red.png); url（blue.png);

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　background - color : green ; 图片始终在上层颜色在最底层

图片被平铺了后面会讲解决方法

后面甚至可以加三个四个先写的图片会在上一层后写的会在下一层

我们既可以设计背景颜色也可以设计背景图片而且背景图片可以多张

我们现在来讲一下平铺的问题，我们希望他x轴平铺或者不平铺怎么办呢？

background - repeat

　　<repeat - style > [ , <repeat - style > ] *　　这个也是多个的这里的多个其实就对应了前面的多张图片

　　<repeat - style> = repeat - x | repeat - y | 　　　　　　

　　[ repeat | space | round | no - repeat ] { 1,2 } 　　　　

　　这些值是可以出现一个或者两个的　　

　　repeat - x : 只沿x轴平铺　　

　　repeat - y : 只沿y轴平铺　

　　repeat ：沿x，y 平铺 space ：首先平铺图片，再平铺的同时每张图片中间会留出一些空隙来这些空隙是被等分的，这空隙是根据：使得　　　　　　

　　整个平铺，正好出现能够容下不会说图片被截掉（结合下图）　　　　　　　　　　　　　　　　　　　　

　　round ：图片进行平铺，平铺的同时这张图片会进行伸缩

　　no - repeat : 不平铺，图片只出现一次你

例子

　　background-image : url (red.png); ------------- background - repeat : repeat- x; --------- background - repeat : repeat- y;-----------background - repeat : space ; ----------background - repeat : round

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　x 轴 y轴　　　　　　background - image: url(red.png),url (blue.png);　

　　background - repeat : no - repeat ; ------------- background - repeat : no - repeat repeat ;---------------background - repeat : no - repeat repeat . repeat -x;