CSS中的背景部分编程学习教程

 　　在CSS里面，每个元素盒子都可以想象成由两个图层组成。

　　前景层：内容(如文本或图片)和边框。

　　背景层：用实色填充(使用 background-color 属性)，也可以包含任意多个背景图片(使用 background-image 属性)，背景图片叠加在背景颜色之上。

　　在 CSS3 被浏览器实现之前，只能在背景颜色上添加一张图片。而现在，我们可以为背景图层添加多张图片(以及 CSS3 渐变)。

　　CSS背景属性：

　　background-color

　　background-image

　　background-repeat

　　background-position

　　background-size

　　background-attachment

　　background(简写属性)

　　background-clip、background-origin、background-break(目前尚未得到广泛支持)

　　背景颜色

　　格式：background-color: 颜色值;

　　示例：background-color: #caebff;

　　背景图片

　　格式：background-image:url(图片路径/图片文件名);

　　示例：background-image:url(images/blue_circle.png);

　　默认情况下背景图片会 以元素左上角为起点，沿水平和垂直方向重复出现，最终填满整个背景区域。

　　背景重复

　　格式：background-repeat: repeat | repeat-x | repeat-y | no-repeat;

　　示例：background-repeat:repeat-x;

　　说明：

　　repeat 默认值，水平和垂直方向都重复，直至填满元素的背景区域为止。

　　repeat-x 水平方向重复。

　　repeat-y 垂直方向重复。

　　no-repeat 任何方向上都不重复(只让背景图片显示一次)。

　　背景位置

　　用于控制背景位置的 background-position 属性，是所有背景属性中最复杂的。

　　该属性有5个关键字值，分别是 top、left、bottom、right 和 center，这些关键字中的任意两个组合起来都可以作为该属性的值。

　　background-position 属性同时设定元素和图片的原点。原点决定了元素和图片中某一点的水平和垂直坐标。默认情况下，background-position的原点位于左上角。

　　第一种情况，使用关键字来设定位置。background-position属性的默认值 top、left 控制着水平和垂直方向重复的起点。如修改 起点位置：p#center {background-position:center center;}(简化写法：background-position:center，设定一个关键值，则另一个也会取相同的值。)，背景图片就会以段落的中心点为起点。

　　第二种情况，使用百分比来设定位置。

　　示例：background-position:50% 50%;，再把 background-repeat 设定为 no-repeat，就能实现了图片在背景区域内居中的效果。第一个值表示水平位置，第二个值表示垂直位置。要是只设定一个值，则将其用来设定水平位置，而垂直位置会被设为 center。

　　第三种情况，使用绝对或相对单位的数值。要是使用像素单位来设定位置，那么图片的左上角会被放在距离元素左上角指定位置的地方。另外，还可以使用负值，这样可以把图片的左上角定位到元素外部，从而在元素中只能看到部分图片。当然也可以给图片设定足够大的正值，把图片的右下角推到元素外部实现同样的效果。

　　背景尺寸

　　background-size 是 CSS3 规定的属性，用来控制背景图片的尺寸。

　　可设定的值和含义如下：

　　50%：缩放图片，使其填充背景区的一半。

　　100px 50px：把图片调整到 100 像素宽，50 像素高。

　　cover：拉大图片，使其完全填满背景区;保持宽高比。

　　contain：缩放图片，使其恰好适合背景区;保持宽高比。

　　注意：把很小的图片拉大会导致图片质量失真。

　　背景粘附

　　background-attachment属性控制滚动元素内的背景图片是否随元素滚动而滚动。

　　属性值有：

　　scroll。背景图片随元素移动。

　　fixed。背景图片不会随元素滚动而移动。

　　提示：background-attachment:fixed 最常用于给 body 元素中心位置添加淡色水印，让水印不随页面滚动而移动。

　　简写背景属性

　　示例：body {background:url(images/watermark.png) center #fff no-repeat contain fixed;}

　　说明：声明中少写了哪个属性的值(比如没写 no-repeat)，就会使用相应属性的默认值( repeat)。

　　多背景图片

　　CSS3 可以给元素背景添加多个背景图片。

　　示例：

　　CSS Code复制内容到剪贴板

　　p {

　　background:

　　url(images/turq_spiral.png) 30px -10px no-repeat,

　　url(images/pink_spiral.png) 145px 0px no-repeat,

　　url(images/gray_spiral.png) 140px -30px no-repeat, #ffbd75;

　　}

　　背景渐变

　　渐变，就是在一定长度内两种或多种颜色之间自然的过渡。

　　提示：渐变是 CSS 帮我们生成的背景图片。添加渐变可以使用 background-image 属性，也可以使用简写 background 属性。

　　渐变分两种：

　　线性渐变。从元素的一端延伸到另一端。

　　放射性渐变。从元素内一点向四周发散。

　　厂商前缀

　　为鼓励浏览器厂商尽早采用 W3C 的 CSS3 推荐标准，于是就产生了 VSP(Vendor Specific Prefixes，厂商前缀)的概念。

　　示例：

　　transform 属性的标准语法是这样的：

　　transform: skewX(-45deg);

　　由于这个属性还没有完全定案，为保证在大多数浏览器以及它们的实验性实现中能够使用这个属性，应该针对想要支持的浏览器为该属性添加 VSP。每个浏览器只使用各自能理解的属性声明：

　　CSS Code复制内容到剪贴板

　　-moz-transform:skewX(-45deg); /* Firefox */

　　-webkit-transform:skewX(-45deg); /* Chrome 及 Safari */

　　-ms-transform:skewX(-45deg); /* 微软 Internet Explorer */

　　-o-transform:skewX(-45deg); /* Opera */

　　transform:skewX(-45deg); /* 最后是 W3C 标准属性 */

　　以下 CSS3 属性必须加 VPS：

　　CSS Code复制内容到剪贴板

　　border-image translate

　　linear-gradient transition

　　radial-gradient background*

　　transform background-image*

　　transform-origin

　　> *针对背景图片或渐变

收藏此文 赞一下！() 打赏本站

如本文对您有帮助，就请建站学习网抽根烟吧！

支付宝打赏
微信打赏