CSS 背景background使用方法

一、Css background背景语法

CSS背景基础知识

CSS 背景这里指通过CSS对对象设置背景属性，如通过CSS设置背景各种样式。

背景语法：

<code class="language-css">background: background-color || background-image || background-repeat || background-attachment || background-position</code>

 

CSS中背景单词：

background CSS手册查询-background
background-color 设置颜色作为对象背景颜色
background-image 设置图片作为背景图片
background-repeat 设置背景平铺重复方向
background-attachment 设置或检索背景图像是随对象内容滚动还是固定的。
background-position 设置或检索对象的背景图像位置。

Background背景样式的值是复合属性值组合，也就是背景单词的值可以跟多个属性值，值与值之间使用一个空格间隔链接上即可。
如：

<code class="language-css">background:#000 url(图片地址) no-repeat left top</code>

Css background背景作用：

1、设置纯色背景。背景background可以设置对象纯色的背景颜色，
2、设置图为背景。可以设置对象背景为图片，如果背景是图片可以让图片重复平铺横铺，或将图片作为对象背景固定在对象任何位置。

设置网页背景样式

Html原始背景与CSS背景对照
Html是指对应效果的table背景设置

Html背景单词：

Bgcolor设置背景颜色 与CSS背景颜色对应background-color
Background设置图片作为背景与CSS背景图片对应background-image

 

二、背景颜色  

<code class="language-css">background-color:#FFF</code>

设置对象背景为纯白色

如果是给table设置背景颜色可以使用bgcolor="颜色值"即可设置对象背景颜色。
如果是CSS背景颜色，可使用background-color:颜色值;或 background:颜色值设置对象背景颜色。

 

三、CSS图片背景

CSS可以使用background或background-image直接引用图片地址来设置图片作为对象背景。

<code class="language-css">background:url(http://www.manongjc.com/logo.gif);</code>

设置LOGO图片作为背景

或

<code class="language-css">background-image:url(http://www.manongjc.com/logo.gif);</code>

具有相同效果。这样设置图片作为背景有个缺陷就是图片会上下左右的重复。

background-attachment使用解析：

background-attachment:fixed； 背景固定

background-attachment:scroll； css背景图片是随对象内容滚动

图片background背景语法：

<code class="language-css">background-image :url (url)</code>

background-image :url (http://www.manongjc.com/logo.gif）

设置对象背景为图片http://www.manongjc.com/logo.gif

如果图片作为背景时候要求是否重复平铺，平铺方向等我们都需要background-position和background-repeat配合使用

<code class="language-css">div{background-image :url (http://www.manongjc.com/logo.gif);
background-repeat : no-repeat;background-position : 5px 6px } </code>

这里定义对象div，背景图片为http://www.manongjc.com/logo.gif，并且背景图片不重复，定位于div对象靠左距离5px，靠上距离6px

 

四、背景居中

CSS 背景分为左右居中和上下居中。

背景图像上下居中，可以使用计算上下高度然后平分设置，如上下高度距离为500px，那就设置图片居顶部多少PX可以让图片实现上下居中。

 

五、复合背景样式简写

我们使用时候都需要考虑到代码优简，这里可以优化的简写代码

1、如果只设置背景为单一颜色

<code class="language-css">background-color:#FFF</code>

我们简写为

<code class="language-css">background:#FFF</code>

2、图片设置为背景简写

<code class="language-css">background-image :url (http://www.manongjc.com/logo.gif);
background-repeat : no-repeat;background-position : 5px 6px </code>

我们简写为：

<code class="language-css">background:url (http://www.manongjc.com/logo.gif) no-repeat 5px 6px </code>

 

六、CSS background（背景）总结

使用图片作为背景在一个网页布局中常常会遇到，希望大家能在实际中掌握其知识。一般设置对象图片作为背景属性实例 background:#666 url(图片地址) no-repeat center top ;（解释首先设置背景颜色 紧跟设置图片作背景 紧跟图片是否重复 然后跟图片在对象位置。前面的背景颜色可以不用设同时不是必须，一般使用图片作为对象背景如果要设置图片是否重复显示距离位置将设置图片位置）

1、设置图片作为背景如果图片设置图片在X坐标方向重复，如果再设置图片在对象位置的左或右位置时将无效，可设置在对象上或下位置开始显示。

2、设置图片作为背景如果图片设置图片在Y坐标方向重复，如果再设置图片在对象位置的上或下位置时将无效，可设置图片在对象左或右位置开始显示。

3、如果设置背景完全重复显示，那设置图片在对象上下左右位置开始显示将无线。

网页布局时候我们常常对网页背景设置颜色、背景设置图片，达到我们需要的美观效果，我们实践制作写css background背景尽量从简，图片引入时候注意路径正确，如需定位对象背景。

经典背景复合属性表达式：

<code class="language-css">.manongjc{background:#FFF url (http://www.manongjc.com/logo.gif) no-repeat 5px 6px} </code>

这里既设置背景颜色，背景图片引入，背景图片定位、图片作为背景是否重复的样式。

相关阅读：

CSS 教程

CSS3 教程

CSS 参考手册