2.CSS之背景图

来源:互联网 发布:网络经营烘焙许可证 编辑:程序博客网 时间:2024/04/29 16:38
1.背景(background)的操作:
-----------------------------------------
A.背景颜色:background-color:颜色值;  默认:transparent(透明); 处于最低层


颜色值:
a.十六进制色:#RRGGBB
b.RGB 颜色:rgb(red, green, blue) 颜色的强度,可以是介于 0 与 255 之间的整数,或者是百分比值(从 0% 到 100%)。
c.RGBA 颜色:RGBA 颜色值得到以下浏览器的支持:IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。
RGBA 颜色值是 RGB 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。
d.HSL 颜色:HSL 颜色值得到以下浏览器的支持:IE9+、Firefox、Chrome、Safari 以及 Opera 10+。
HSL 指的是 hue(色调)、saturation(饱和度)、lightness(亮度) - 表示颜色柱面坐标表示法。
HSL 颜色值是这样规定的:hsl(hue, saturation, lightness)。
Hue 是色盘上的度数(从 0 到 360) - 0 (或 360) 是红色,120 是绿色,240 是蓝色。Saturation 是百分比值;0% 意味着灰色,而 100% 是全彩。Lightness 同样是百分比值;0% 是黑色,100% 是白色。
e.HSLA 颜色
HSLA 颜色值得到以下浏览器的支持:IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。
HSLA 颜色值是 HSL 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。
HSLA 颜色值是这样规定的:hsla(hue, saturation, lightness, alpha),其中的 alpha 参数定义不透明度。alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。

f.预定义/跨浏览器颜色名:英文(147 中颜色名(17 种标准颜色加 130 种其他颜色:http://www.w3school.com.cn/cssref/css_colornames.asp)
------------------------------------------------------------------------------------------
B.背景图:background-image:url(图片路径);允许在背景中添加一张照片


-------------------------------------------------------------------------------------
C.背景平铺:background-repeat属性 该属性是建立在背景图的基础之上的


取值:repeat( 默认值,同时在水平和垂直方向上平铺)|no-repeat(图像只显示一次)| repeat-x;(图片沿水平方向x轴平铺 ) |repeat-y(图片沿垂直方向(y轴)平铺 |inherit(图片继承父元素的background-repeat属性))
--------------------------------------------------------------------------------------------
D.背景定位:background-position:x y;  background-position属性用于控制背景图片在元素中的位置.


第一个数字表示水平(x轴)位置,第二个数字表示是垂直(y轴)位置

可以其它的长度单位、关键字或百分比来进行定位。
*使用百分比时,浏览器是以元素的百分比来设置图片的位置的

----------------------------------------------------------------------------------------------
E.背景图片是否滚动:background-attachment:scroll(默认值,背景图片会随着页面的滚动而滚动 )|fixed将页面向下滚动,而背景图片会待在它原来的位置上,不会随着元素进行滚动
---------------------------------------------------------------------------------------------


背景的简写属性:
background:<color> <image> <position> <attachment> <repeat>;
并不需要给出每一个值,如果某一个值没有指定,就会使用属性的默认值。
顺序可以换但是要注意 position的值在设置两个的时候不能分开
1 0