来看看：CSS教程:CSS背景全攻略

网上冲浪无论你用InternetExplorer还是NetscapeNavigator，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。
网页制造poluoluo文章简介：背景(background)是css中一个主要的的部分，也是必要晓得的css的基本常识之一。这篇文章将会触及css背景(background)的基础用法，包含诸如background-attachment等的属性，也会先容一些有关背景(background)的经常使用技能，和css3中的背景(background)(包括4个新的
原文链接：BackgroundsInCSS:EverythingYouNeedToKnow
译文链接：css背景全攻略
背景(background)是css中一个主要的的部分，也是必要晓得的css的基本常识之一。这篇文章将会触及css背景(background)的基础用法，包含诸如background-attachment等的属性，也会先容一些有关背景(background)的经常使用技能，和css3中的背景(background)(包括4个新的背景(background)属性)。

css2中的背景(background)

概述

CSS2中有5个次要的背景(background)属性，它们是：
*background-color:指定添补背景的色彩。
*background-image:援用图片作为背景。
*background-position:指定元素背景图片的地位。
*background-repeat:决意是不是反复背景图片。
*background-attachment:决意背景图是不是随页面转动。
这些属性能够全体兼并为一个缩写属性:background。必要注重的一个要点是背景占有元素的一切内容地区，包含padding和border，可是不包含元素的margin。它在Firefox,Safari,Opera和IE8中事情一般，可是IE6和IE7中，background没把border盘算在内。

登录/注册后可看大图

基础属性

背景致(background-color)

background-color属性用纯色来添补背景。有很多体例指定这个色彩，以下体例都失掉不异的了局。

1. background-color:blue;background-color:rgb(0,0,255);background-color:#0000ff;

复制代码

background-color也可被设置为通明（transparent），这会使得其下的元素可见。
背景图(background-image)

background-image属性同意指定一个图片展现在背景中。能够和background-color连用，因而假如图片不反复地话，图片掩盖不到地中央城市被背景致添补。代码很复杂，只必要记着，路径是相对款式表的，因而以下的代码中，图片和款式表是在统一个目次中的。

1. background-image:url(image.jpg);

复制代码

可是假如图片在一个名为images的子目次中，就应当是：

1. background-image:url(images/image.jpg);

复制代码

糖伴西红柿：利用../暗示上一级目次，好比background-image:url(../images/image.jpg);暗示图片位于款式表的下级目次中的images子目次中。有点绕，不外这个人人应当都晓得了，我就说了。前端察看版权一切，转载请保存链接。
背景平展(background-repeat)

设置背景图片时，默许把图片在程度和垂直偏向平展以展满全部元素。这大概是你必要的，可是偶然会但愿图片只呈现一次，大概只在一个偏向平展。以下为大概的设置值和了局：

1. background-repeat:repeat;/*默许值，在程度和垂直偏向平展*/background-repeat:no-repeat;/*不屈展。图片只展现一次。*/background-repeat:repeat-x;/*程度偏向平展(沿x轴)*/background-repeat:repeat-y;/*垂直偏向平展(沿y轴)*/background-repeat:inherit;/*承继父元素的background-repeat属性*/

复制代码

背景定位(background-position)

background-position属性用来把持背景图片在元素中的地位。技能是，实践上指定的是图片左上角相对元素左上角的地位。
上面的例子中，设置了一个背景图片而且用background-position属性来把持它的地位，同时也设置了background-repeat为no-repeat。计量单元是像素。第一个数字暗示x轴(程度)地位，第二个是y轴(垂直)地位。

1. /*例1:默许值*/background-position:00;/*元素的左上角*//*例2:把图片向右挪动*/background-position:75px0;/*例3:把图片向左挪动*/background-position:-75px0;/*例4:把图片向下挪动*/background-position:0100px;

复制代码

登录/注册后可看大图

background-position属性能够用别的数值，关头词和百分比来指定，这对照有效，特别是在元素尺寸不是用像素设置时。
关头词是不必注释的。x轴上：

• *left
  
• *center
  
• *right
  

y轴上:

• *top
  
• *center
  
• *bottom
  

按次方面和利用像素值时的按次几近一样，起首是x轴，其次是y轴，像如许：

1. background-position:topright;

复制代码

利用百分数时也相似。必要次要的是，利用百分数时，扫瞄器是以元素的百分比数值来设置图片的地位的。看例子就好了解了。假定设定以下：

1. background-position:100%50%;

复制代码

Thisgoes100%ofthewayacrosstheimage(i.e.theveryright-handedge)and100%ofthewayacrosstheelement(remember,thestartingpointisalwaysthetop-leftcorner),andthetwolineupthere.Itthengoes50%ofthewaydowntheimageand50%ofthewaydowntheelementtolineupthere.Theresultisthattheimageisalignedtotherightoftheelementandexactlyhalf-waydownit.
糖伴西红柿：这一段没想到符合的翻译，保存原文，意译。前端察看版权一切，转载请保存链接。
注重原点老是左上角，终极的效果是笑容图片被定位在元素的最右侧，离元素顶部是元素的一半，效果和background-position:rightcenter;一样。

登录/注册后可看大图

背景附着

background-attachment属性决意用户转动页面时图片的形态。三个可用属性为scroll(转动)，fixed(流动)和inherit(承继)。inherit纯真地指定元素承继他的父元素的background-attachment属性。
为了准确地舆解background-attachment，起首必要分明页面(page)和视口(viewport)是怎样合作地。视口(viewport)是扫瞄器显现网页的部分(就是往失落工具栏的扫瞄器)。视口(viewport)的地位流动，稳定动。
当向下转动网页时，视口(viewport)是不动的，而页面的内容向上转动。看起来貌似视口(viewport)向页面下方转动了。假如设置background-attachment:scroll，就设置了当元素转动时，元素背景也必须跟着转动。简而言之，背景是紧贴元素的。这是background-attachment默许值。
用一个例子来更分明地形貌下：

1. background-image:url(test-image.jpg);background-position:00;background-repeat:no-repeat;background-attachment:scroll;

复制代码

登录/注册后可看大图

当向下转动页面时，背景向上转动直至消散。
可是当设置background-attachment为fixed时，当页面向下转动时，背景要待在它本来的地位(相对扫瞄器来讲)。也就是不随元素转动。
用另外一个例子形貌下：

1. background-image:url(test-image.jpg);background-position:0100%;background-repeat:no-repeat;background-attachment:fixed;

复制代码

登录/注册后可看大图

页面已向下转动了，可是图象仍旧坚持可见。
必要器重的一点是背景图只能呈现在它父元素能到达的地区。即便图片是相对视口(viewport)定位地，假如它的父元素不成见，图片就会消散。拜见上面的例子。此例中，图片位于视口(viewport)的左下方，可是只要元素内的图片部分是可见的。

1. background-image:url(test-image.jpg);background-position:0100%;background-repeat:no-repeat;background-attachment:fixed;

复制代码

登录/注册后可看大图

由于图片入手下手在元素以外，一部分图片被切除。
背景的简写属性

能够把背景的各个属性合为一行，而不必每次都独自把他们写出来。格局以下：

1. background-image:url(image.jpg);0

复制代码

比方，上面的声明

1. background-image:url(image.jpg);1

复制代码

能够合为独自一行：

1. background-image:url(image.jpg);2

复制代码

并且不必要指定每个值。假如省略值地话，就利用属性地默许值。比方，下面那行和上面这个效果一样：

1. background-image:url(image.jpg);3

复制代码

背景的一样平常用法

除能够用来使元素加倍文雅这类明显的用法以外，背景也能够用于别的的目标。
仿栏

当利用css的float属性来定位结构元素时，要确保两栏或多栏有不异的长度是对照坚苦的。假如长度分歧，个中一栏的背景会比别的的短，这会损坏全部计划。
仿栏是个十分复杂的背景技能，这个技能最早宣布在AListApart。思绪很复杂：不再给每列独自设置背景，而是给各列的父元素设置一个背景图。一切栏的计划都包括在这张图片当中。
文本交换

在网页上，关于字体的选择是相称无限的。可使用sIFR之类的工具来定制字体，可是这必要用户启用JavaScript。一个合用于恣意扫瞄器的复杂办法是，用想用的字体来做一张文本图片，并用这张图片作为背景。如许，文本仍然呈现在文档标志中以供搜刮引擎检索和屏幕扫瞄器辨认，可是在扫瞄器中就会显现首选的字体。
比方，HTML标志多是如许的：

1. background-image:url(image.jpg);4

复制代码

假设有一个200乘75的图片，下面有更悦目的字体，就能够用以下体例来交换文本：

1. background-image:url(image.jpg);5

复制代码

复杂的圆点

无需列表中的圆点看起来很丢脸。不必再处置一切分歧的list-style属性，只必要复杂地把他们埋没并用背景图取代就能够了。由于图片能够随便选择，这些圆点就能够看起来更大度。
上面，我们把一个无需列表改革成有油滑圆点的：

1. background-image:url(image.jpg);6

复制代码

CSS3中的背景

CSS3中的背景有较多改善。最明显的是多背景图片的选项，同时也增添了4个新属性。
多背景

CSS3中，能够对一个元素使用一个或多个图片作为背景。代码和css2中的一样，只必要用逗号来区分各个图片。第一个声明的图片定位在元素顶部，别的的图片顺次在其下分列，比方：

1. background-image:url(image.jpg);7

复制代码

新属性：背景修剪(background-clip)

这又把我们带回了文章入手下手会商的谁人关于边框内图片显现的话题。它被形貌为“背景刻画区”。
background-clip属性用来加强背景显现地位的把持才能。大概的值为：
*background-clip:border-box;
背景显现在边框内。
*background-clip:padding-box;
背景显现在内补白(padding)内，而不是边框内。
*background-clip:content-box;
只在内容内显现背景，而不是内补白(padding)和边框内。
*background-clip:no-clip;
默许值，和border-box一样。
新属性：背景原点(background-origin)

这个属性和background-position分离起来利用。能够从边框，内补白大概内容盒子入手下手盘算background-position(相似于background-clip)。
*background-origin:border-box;
以边框为原点入手下手盘算background-position.
*background-origin:padding-box;
之内补白为原点入手下手盘算background-position
*background-origin:content-box;
之内容盒子为原点入手下手盘算background-position
关于background-clip和background-origin分歧的一个注释参看CSS3.info
新属性：背景尺寸(background-size)

background-size用来调剂背景图的巨细。有好几个大概值：
*background-size:contain;
减少图片来顺应元素的尺寸(坚持像素的长宽比)
*background-size:cover;
扩大图片来填满元素(坚持像素的长宽比)
*background-size:100px100px;
调剂图片到指定巨细
*background-size:50%100%;
调剂图片到指定巨细。百分比是相对包括元素的尺寸的。
能够看一下CSS3划定规矩网站上的几个例子。
新属性：(background-break)

CSS3中，元素能够被分红几个自力的盒子(比方使内联元素span超过多行)。background-break属性用来把持背景如何在这些分歧的盒子中显现。
大概值为：
*Background-break:continuous;
默许值。疏忽盒之间的间隔(也就是像元素没有分红多个盒子，仍然是一个全体一样)
*Background-break:bounding-box;
把盒之间的间隔盘算在内
*Background-break:each-box;
为每一个盒子独自重绘背景
背景致(background-color)的改善

background-color在css3中有了稍许改善。除设置背景色彩以外，假如元素底层的背景图不成用，还能够设置一个“回褪色”。
经由过程在回褪色之前增添一个斜杠(/)来完成，比方：

1. background-image:url(image.jpg);8

复制代码

此例中，背景致应当是绿色(green)。但是，假如底层背景图不克不及利用的话，背景致就是蓝色而不是绿色。假如在斜杠前不指定色彩，默许为通明(transparent)。
背景平展(background-repeat)的改善

CSS2中当图片平展时，会被元素在末了截断。CSS3引进了两个属性来修改这个成绩:
*space:使用一律数目的空缺到图片之间，直到填满全部元素
*round:减少图片直到恰好平展满元素
关于background-repeat:space;的一个例子，能够在CSS3划定规矩网站看到。
背景附着(background-attachment)的改善

background-attachment属性增添了一个新值：local。这是用来共同能够转动的元素的(设置为overflow:scroll;的元素)。当background-attachment设置为转动(scroll)时，背景图不会随元素内容的转动而转动。
设置为background-attachment:local;时，背景图会随内容的转动而转动。
总结

总结一下，css中关于背景有很多必要晓得的常识。可是一旦把这些常识举一反三了，这些手艺和定名商定就变得十分成心义并且很快就会成为潜认识举动了。
假如刚打仗css，次要不休接洽就能够较快地把握背景的要点了。假如是内行，我但愿你能够和我一样等候css3。
关于作者

MichaelMartin的文章年夜多触及网页计划，WordPress并为ProBlogDesign事情。能够检察更多关于博客计划的文章大概在twitter上存眷他。

不管你用什么工具软件制作网页，都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼，同样内容的网页，有的人做出来有几十KB，而高手做出来只有十几KB。

学Dreamweaver技术的过程其实是一个增加信心的过程。

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

滚动条)层属性--溢出(visible/hidden/scroll/auto)

HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。