大家好,本人是一名技术小白,每周在学习h5之余,会在学习的内容中抽出些知识点跟大家分享,希望有机会帮到一些朋友,不足之处也希望大家多多指正.

今天给大家分享的是background(背景)的五个属性,分别是background-color(背景颜色)、background-image(背景图片)、background-repeat(背景平铺)、background-position(背景位置)、background-attachment(背景固定);这五项在日常应用中用的比较多,兼容性也比较好,所以针对这五项分享一下.

一、Background-color(背景颜色):

Background-color(背景颜色)的使用和color(字体颜色)类似,可用三种方式:

1.十六进制-如:””#fffff”,注明(六个相同数字及字母可缩写为三个-如:”fff”).

2.RGB-如:”rgb(255,255,255)”.

3.颜色名称-如:”red”.

二、background-image(背景图片):

示范:background-image:url(图片地址);

图片初始位置为父级元素的左上角.

这个属性较为简单,需要找准图片所在位置,单纯记忆就可.

三、background-repeat(背景平铺):

示范:background-repeat: no-repeat.

此项共有五个属性:repeat(平铺)/no repeat(不平铺)/repeat-x(x轴平铺)/repeat-y(y轴平铺)/inherit(父级继承).

repeat:背景图片会按照自身尺寸铺满整个父级元素,当自身尺寸比父级元素大时,则会显示一部分.

no-repeat:顾名思义,背景图片会根据自身尺寸单张出现在父级元素,不会铺满.

repeat-x:背景图片根据自身尺寸沿x轴铺满.

repeat-y:背景图片根据自身尺寸沿y轴铺满.

inherit:指定background-repeat属性设置应该从父元素继承.

四、background-position(背景位置):

此项共有四种形式可供选择:

1.英文单词-如:background-position:left top;(数值不分前后,根据方向划分.)

2.百分比-如:background-position:x% y%;(第一个值是水平位置，第二个值是垂直.左上角是0％0％.右下角是100％100％.如果仅指定了一个值，其他值将是50％.默认为0% 0%)

3.数值式-如:background-position:0px 0px;(第一个值是水平位置，第二个值是垂直.左上角是0.单位可以是像素（0px0px）或任何其他 CSS单位.如果仅指定了一个值，其他值将是50％.百分比、数值可混用)

4.inherit:指定background-repeat属性设置应该从父元素继承.

五、background-attachment(背景固定):

此项共有四种形式可供选择:scroll(滚动)/fixed(固定)/iocal(滚动条内固定)/inherit(父级继承).

1.background-attachment:scroll;(背景图片跟随页面的滚动而滚走,跟随原来的位置.默认值.)

2.background-attachment:fixed;(页面滚动时,背景图片固定在父级元素的某个位置)

3.background-attachment:iocal;(背景图片会随着元素内容的滚动而滚走,跟随原来的位置.)

4.background-attachment:inherit;(指定background-repeat属性设置应该从父元素继承.)

最后还有五项属性的优化写法分享给大家:

示范:background:yellow url(图片位置) no-repeat center center fixed;

这是一个背景图片的书写方法;

如果一个父级元素内有两个乃至多个背景图片的书写需求的话请看下列示范:

示范:background: url(图片位置) no-repeat center center fixed,url(图片位置) no-repeat center center fixed yellow;

两个以上的背景图片中间用逗号隔开,然后继续书写.

需要注意的是,背景颜色需要放在最后一项的最后一个,否则颜色不会出现.

以上就是本次的分享,希望大家能够喜欢!也感谢大家的驻足观看!