|
1.1.1. background背景 一个页面的背景色与背景图的色调，能够给用户留下最直观的第一印象。 背景有5个主要的（background）属性，它们是： background-color： 指定填充背景的颜色。 background-image： 引用图片作为背景。 background-position： 指定元素背景图片的位置。 background-repeat： 决定是否重复背景图片。 background-attachment： 决定背景图是否随页面滚动。 这些属性可以全部合并在一起简写属性： background。需要注意的是背景占据元素的所有内容区域。下面开始逐一介绍，我们重点要学会后面的简写方式，因为工作中经常会用到。 n background-color 背景颜色 background-color 专门用于设置背景颜色，颜色值可以是十六进制颜色，也可以是某颜色的英文或者rgb值，例如以下几种方式得到的效果完全相同。 body{background-color:red;} h1{background-color:#ff0000;} p{background-color:rgb(255,0,0);} n background-image背景图background-image 专门用于设置背景图片。在用background-image时需要注意图片路径问题，图片路径是相对于样式表的，因此以下的代码中，图片和样式表是在同一个目录中。 background-image： url（image.jpg）; 但是如果图片在一个名为 images的文件夹中样式表在根目录的话，就应该是： background-image： url（images/image.jpg）; 如果css文件在一个名为css的文件夹中，应该写成： background-image： url（../images/image.jpg）; 工作中我们在利用dreamweaver选取图片的时候，软件会自动帮我们写好图片的路径。 n background-repeat背景平铺方式设置背景图时，默认铺满整个元素。但是有时我们需要的效果可能是只横向平铺或者只竖向平铺，也可能是不平铺，我们可以这样。 background-repeat： no-repeat; /* no-repeat指不平铺。图片只展示一次，并以左上角为起点。 */ background-repeat： repeat-x; / * repeat-x指水平方向平铺（沿 x 轴） */ background-repeat： repeat-y; /*repeat-y垂直方向平铺（沿 y 轴） */ n background-position背景定位background-position 属性用来精确控制背景图在元素中的位置，后面跟两个参数，分别用于控制横坐标和纵坐标，参数可以是数值也可以是方位。第一个值代表X轴坐标，正数向右偏移，负数向左偏移。第二个值代表Y轴坐标，正数向下偏移，负数向上偏移 background-position： 15px 0; /* 背景元素右移15像素 */ background-position： -75px 0; /* 背景元素左移75像素 */ background-position： 0 80px; /* 背景元素下移80像素 */ background-position： right bottom;/* 背景元素位于区块右下角 */ n background-attachment 属性定义背景图片随滚动轴的移动方式。 取值: scroll | fixed scroll: 随着页面的滚动轴背景图片将移动 fixed: 随着页面的滚动轴背景图片不会移动 例如： body{ background:#d6f5a9 url(body_bg.jpg) no-repeat top; background-attachment:fixed; } 此时页面向下拉滚动条时，背景图片将不会随着内容的上移而上移动，前提是页面需要足够长。 n background 背景简写设置 background背景属性是复合属性，有一系列的与背景有关的属性组成，可以把背景的各个属性合为一行，而不用每次都单独把他们写出来。格式如下： background： color || image || position || attachment || repeat 例如，下面的声明列出了背景简写的大部分用法： background:#f00; /*背景颜色*/ background:url(mm.gif); /*平铺*/ background:url(mm.gif) no-repeat; /*不平铺*/ background:url(mm.gif) repeat-x; /*横向平铺*/ background:url(mm.gif) repeat-y; /*竖向平铺*/ background:url(mm.gif) no-repeat top; /*不平铺，并从顶部开始*/ background:url(mm.gif) no-repeat center; /*不平铺，并从中间开始*/ background:url(mm.gif) no-repeat left; /*不平铺，并从左边开始*/ background:url(mm.gif) no-repeat right; /*不平铺，并从右开始*/ background:#ccc url(mm.gif) repeat-x top; /*同时定义背景色与背景图片*/ background:url(mm.gif) no-repeat -50px 100px; /*后面两个值是background-position参数*/ n background背景展示效果通过几个列子来理解背景的使用： 我们在body里新建一个div区块： 样式：div{ width:260px; height:120px; border:#000 solid 2px; background:url(wy.gif); }
我们将样式中加粗的部分替换成以下属性： background:url(wy.gif); 背景平铺效果如图3-6所示 图3-6 background:url(wy.gif) no-repeat; 背景不平铺效果，如图3-7所示： 图3-7 background:url(wy.gif) repeat-x; 背景横向平铺效果，如图3-8所示 图3-8 background:url(fg.gif) repeat-y; 背景纵向平铺效果，如图3-9所示 图3-9 background:url(wy.gif) no-repeat left; 背景不平铺靠左效果，如图3-10所示 图3-10 background:url(wy.gif) no-repeat right; 背景不平铺靠右效果，如图3-11所示 图3-11 background:url(wy.gif) no-repeat top; 背景不平铺靠上效果，如图3-12所示 图3-12 background:url(wy.gif) no-repeat bottom; 背景不平铺靠下效果，如图3-13所示 图3-13 background:url(wy.gif) no-repeat 20px 30px; 背景不平铺向右移20像素向下移30像素，如图3-14所示 图3-14 background:url(wy.gif) no-repeat left bottom; 背景不平铺靠左靠下效果，如图3-15所示 图3-15 background:url(wy.gif) no-repeat right bottom; 背景不平铺靠右靠下效果，如图3-16所示 图3-16 background:url(wy.gif) no-repeat top right; 背景不平铺靠上靠右效果，如图3-17所示 图3-17 n 同时定义背景图与背景色首先给body定义一个背景图不平铺并靠上，这样做的目的是，无论在多少分辨率的浏览器上，背景图都会在浏览器的靠上部的正中间，以中间为基准对齐。 body{ background:url(body_bg.jpg) no-repeat top;} 效果如图3-18所示： 图3-18 然后用PHOTOSHOP软件打开本图片，并用配合拾色器利用吸管工具在图片的最下方点一下，得到图片最下方的颜色色值：#d6f5a9 效果如图3-19所示： 图3-19 得到色值之后，把色值加到背景图片之前，并用空格与背景图隔开。 body{ background: #d6f5a9 url(body_bg.jpg) no-repeat top;} 效果如图3-20： 图3-20 这里我们看到整个页面很自然的过度到了一片绿色效果，其实是这里就是利用了同时定义背景色与背景图的效果，下面的一大片的绿色其实已经不是图片部分，是我们定义的背景色。background:#d6f5a9 url(body_bg.jpg) no-repeat;样式中的颜色值#d6f5a9。
| 
收藏
淘帖
踩
