CSS背景Background
特性:background目的:背景集合(常用)
语法:
background:background-color||background-image||background-repeat||background-attachment||background-position
参数:
该属性是复合属性。请参阅各参数对应的属性。
特性:background-attachment目的,设置背景图像与内容的联动方式(常用)
语法:
background-attachment:scroll|fixed
参数:
scroll: 背景图像是随对象内容滚动
fixed: 背景图像固定
特性background-color目的:设置背景颜色(常用)
语法:
background-color:transparent|color
参数:
transparent: 背景色透明
color: 指定颜色。请参阅颜色单位和附录:颜色表
特性background-image目的:设置背景图像(常用)
语法:
background-image:none|url(url)
参数:
none: 无背景图
url: 使用绝对或相对地址指定背景图像
特性:background-position目的:固定背景位置(常用)
语法:
background-position:length||length
background-position:position||position
参数:
length: 百分数|由浮点数字和单位标识符组成的长度值。请参阅长度单位
position: top|center|bottom|left|center|right
特性background-positionX目的:固定背景X轴位置
语法:
background-positionX:length|left|center|right
参数:
length: 百分数|由浮点数字和单位标识符组成的长度值。请参阅长度单位
left: 居左
center: 居中
right: 居右
特性:background-positionY目的:固定背景Y轴位置
语法:
background-positionY:length|top|center|bottom
参数:
length: 百分数|由浮点数字和单位标识符组成的长度值。请参阅长度单位
top: 居顶
center: 居中
bottom: 居底
特性:background-repeat目的:这是背景图像的重复方式
语法:
background-repeat:repeat|no-repeat|repeat-x|repeat-y
参数:
repeat: 背景图像在纵向和横向上平铺
no-repeat: 背景图像不平铺
repeat-x: 背景图像在横向上平铺
repeat-y: 背景图像在纵向平铺
特性:background-origin目的:背景开始显示的区域
语法:
background-origin:border|padding|content
参数:
border:从border区域开始显示背景。
padding:从padding区域开始显示背景。
content:从content区域开始显示背景。
特性:background-clip目的:背景开始裁剪的区域
语法:
background-clip:border-box|padding-box|content-box|no-clip
参数:
border-box:从border区域向外裁剪背景。
padding-box:从padding区域向外裁剪背景。
content-box:从content区域向外裁剪背景。
no-clip:从border区域向外裁剪背景。
特性:ackground-size目的,显示背景图像的大小
语法:
background-size:[<length>|<percentage>|auto]{1,2}|cover|contain
参数:
<length>:由浮点数字和单位标识符组成的长度值。不可为负值。
<percentage>:取值为0%到100%之间的值。不可为负值。
HSLcolors版本:CSS3.0目的:色调,饱和度,亮度
语法:
<length>||<percentage>||<percentage>
取值:
<length>:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,当然可取其他数值来确定其它颜色;
<percentage>:Saturation(饱和度)。取值为0%到100%之间的值;
<percentage>:Lightness(亮度)。取值为0%到100%之间的值;
使用方法:background-color:hsl(240,100%,50%);
HSLAcolors版本:CSS3.0目的:色调,饱和度,亮度
语法:
<length>||<percentage>||<percentage>||<opacity>
取值:
<length>:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,当然可取其他数值来确定其它颜色;
<percentage>:Saturation(饱和度)。取值为0%到100%之间的值;
<percentage>:Lightness(亮度)。取值为0%到
使用方法:background-color:hsla(0,100%,50%,0.2);">
opacity版本:CSS3.0目的:设置透明度
语法:
<length>|inherit
取值:
<length>:由浮点数字和单位标识符组成的长度值。不可为负值。默认值为:1
inherit:默认继承。
RGBAcolors版本:CSS3.0目的:使用三色设置颜色
语法:
R:红色值。正整数|百分数
G:绿色值。正整数|百分数
B:蓝色值。正整数|百分数
A:透明度。取值0~1之间
取值:
<length>:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,当然可取其他数值来确定其它颜色;
<percentage>:Saturation(饱和度)。取值为0%到100%之间的值;
<percentage>:Lightness(亮度)。取值为0%到100%之间的值;
<opacity>:alpha(透明度)。取值在0到1之间;