CSS 背景(background)

CSS 背景(background)

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

background-color	背景颜色
background-image	背景图片地址
background-repeat	是否平铺
background-position	背景位置
background-attachment	背景固定还是滚动
背景的合写（复合属性）
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

背景图片(image)

语法：

background-image : none | url (url) 

参数：

none : 　无背景图（默认的）
url : 　使用绝对或相对地址指定背景图像

background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。 如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。

小技巧： 我们提倡 背景图片后面的地址，url不要加引号。

背景平铺（repeat）

语法：

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

参数：

repeat : 　背景图像在纵向和横向上平铺（默认的）

no-repeat : 　背景图像不平铺

repeat-x : 　背景图像在横向上平铺

repeat-y : 　背景图像在纵向平铺

设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。

repeat-x : 　背景图像在横向上平铺

repeat-y : 　背景图像在纵向平铺

背景位置(position)

语法：

background-position : length || length

background-position : position || position 

         /* 1.利用方位名词 top bottom 来更改背景图片位置 */
        /*background-position: left top;   默认的是 左上角 */
        /*background-position: bottom right ;   方位名词没有顺序，谁在前都可以 */
        /* background-position: center center ;  */ 
        /* background-position: left;   如果方位名词只写一个，另外一个默认为center */
       /*  background-position: 10px 30px; 
         2. 精切单位 第一值一定是x坐标 第二个值一定是y坐标 */

         /* 3. 混搭 */
        background-position: center 10px ;
        /* center 10px  水平居中的 垂直是 10px 
        10px center   水平10px  垂直是 居中 */

参数：

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坐标。

实际工作用的最多的，就是背景图片居中对齐了。

背景附着

语法：

background-attachment : scroll | fixed 

background-attachment: fixed; 默认的是 scroll 滚走的
参数：

scroll : 　背景图像是随对象内容滚动
fixed : 　背景图像固定

说明： 设置或检索背景图像是随对象内容滚动还是固定的。

背景简写

background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

background: #000 url(images/ms.jpg) no-repeat fixed center -25px;

背景透明(CSS3)

CSS3支持背景半透明的写法语法格式是:

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

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

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

背景缩放(CSS3)

通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样， 直接通过 width 和height 设置就可. 在移动Web开发中做屏幕适配应用非常广泛。

其参数设置如下：

a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）

b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏 .
图片进行等比例缩放 图片一定要保证宽度和高度同时满足盒子的大小 势必会有部分超出去，就看不见了 。我们平时用的cover 最多

c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。
图片进行等比例缩放 如果图片的高度或者 宽度 有一个和盒子一样大了，就不在缩放
这样的好处就是保证了图片的完整。 不会有缺失的一部分， 但是会有部分裸露

	div {
			width: 400px;
			height: 500px;
			background: hotpink url(images/l.jpg) no-repeat;
			/*background-size: 100px;   我们尽量只改一个值，防止缩放失真扭曲 */
			background-size: 50%;   /*把背景图片缩放为原来的一半大小 */
			
		}

多背景(CSS3)

以逗号分隔可以设置多背景，可用于自适应布局 做法就是 用逗号隔开就好了。

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

background: url(images/l.jpg) no-repeat left top ,
			url(images/3.jpg) no-repeat right bottom hotpink;

---

文本的装饰

text-decoration 通常我们用于给链接修改装饰效果

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。下划线 也是我们链接自带的
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。

使用技巧：在一行内的盒子内，我们设定行高等于盒子的高度，就可以使文字垂直居中。

    <style>
		a {
			width: 200px;
			height: 50px;
			display: inline-block;  /* 把a 行内元素转换为行内块元素 */
			text-align: center;  /* 文字水平居中 */
			line-height: 50px;  /* 我们设定行高等于盒子的高度，就可以使文字垂直居中 */
			color: #fff;
			font-size: 22px;
			text-decoration: none;  /* 取消下划线 文本装饰 */
		}
		a:hover {  /* 鼠标经过 给我们的链接添加背景图片*/
			background: url(images/h.png) no-repeat; 
		}
        </style>