html背景图片属性及浮动5

html背景图片属性及浮动5

1.背景颜色 background-color:背景颜色;

颜色单词:red

三原色:red green blue alpha 透明

rgb(0,0,0) rgba(0,0,o,0)

取值范围

        rgb 0-255

          a    0-1

十六进制:取值范围#0-9 a-f

aabbcc缩写#abc

2.背景图片 background -image:ur1(“图片地址");

【注】图片默认重复

background-repeat:是否重复;

repeat               重复(默认值)

repeat-x            水平重复

repeat-y            垂直重复

no-repeat不重复

background:position：值1 值2：

两个值︰第一个值表示水平位置的值，第二个值:表示垂直的位置。

当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置

说明:向左方向，向上方向是负值背景属性的缩写语法:

background:属性值1 属性值2 属性值3：

背景缩写: background:url(背景图片的路径及全称)no-repeat center top #f00;

background-position:水平垂直;

left center right

top center bottom

px

【注】只写一个值,另一边居中

3.背景图的固定性{{background-atsachment:scroll(滚动)/fixed(固定);}

fixed固定，不随内容—块滚动;

scroll:随内容—块滚动。

4：浮动

1: float属性的应用

语法: float:none/left/right;

浮动的目的:就是让竖着的东西横着来

有三个取值:

left:元素活动浮动在文本左面

right:元素浮动在右面

none:默认值，不浮动。

2:浮动产生的布局影响

相同方向的浮动元素,先浮动的显示在前面.不同方向的浮动元素,左浮找左浮,右浮找右浮,浮动元素浮动之后的位置,由浮动元素浮动之前在标准流中的位置来决定.贴靠现象:如果浮动的最后一个元素超过了父元素的宽度,会自动找上一个元素贴过去;如果宽度还是不够;继续找上一个~如果父元素宽度还是不够的话,那就只能凑合呆着了,图文混排