html背景定位⽅式,HtmlCSS---定位与背景
定位
position属性可以控制Web浏览器如何以及在何处显⽰特定的元素
可以使⽤position属性把⼀个元素放置到⽹ 页中的任何位置。
可选值：
static
relative：相对定位--->以他⾃⾝为原点
当开启了相对定位以后，可以使⽤top、right、 bottom、left四个属性对元素进⾏定位。
absolute：绝对定位---相对于离他最近 的祖先定位元素进⾏定位
开启了绝对定位以后，可以使⽤top、right、 bottom、left四个属性对元素进⾏定位。
绝对定位的特点：
1.绝对定位会使元素完全脱离⽂本流。
绝对定位的块元素的宽度会被其内容撑开。
绝对定位会使⾏内元素变成块元素。
⼀般使⽤绝对定位时会同时为其⽗元素指定⼀ 个相对定位，以确保元素可以相对于⽗元素进 ⾏定位。
fixed：固定定位----根据浏览器窗⼝
当开启了固定定位以后，可以使⽤top、right、bottom、left四个属性对元素进⾏定位
z-index---元素层次
z-index可以指定⼀个整数作为参数，值越 ⼤元素显⽰的优先级越⾼，也就是z-index 值较⼤的元素会显⽰在⽹页的最上层。opcity：透明(只能在0~1取值)
IE6：filter：alpha(opcity=50)
背景
background-color
background-color属性⽤来为元素设置背 景颜⾊。
需要指定⼀个颜⾊值，当指定了⼀个颜⾊ 以后，整个元素的可见区域都会使⽤这个 颜⾊作为背景⾊。
如果不设置背景颜⾊，元素默认背景颜⾊ 为透明，实际上会显⽰⽗元素的背景颜⾊。
background-image
background-image可以为元素指定背景 图⽚。
和background-color类似，这不过这⾥使 ⽤的是⼀个图⽚作为背景。
需要⼀个url地址作为参数，url地址需要指 向⼀个外部图⽚的路径
例如：
background-image: url(1.jpg)
background-repeat
background-repeat⽤于控制背景图⽚的 重复⽅式。
如果只设置背景图⽚默认背景图⽚将会使 ⽤平铺的⽅式，可以通过该属性进⾏修改。可选值：
-repeat：默认值，图⽚左右上下平铺
-no-repeat：只显⽰图⽚⼀次，不会平铺
-repeat-x：沿x轴⽔平平铺⼀张图⽚
-repeat-y：沿y轴⽔平平铺⼀张图⽚
css中的position属性
width: 1024px;
height:724px;
margin: 0 auto;
background-color: #bfa;
background-image:url(img/1.jpg);
background-repeat: repeat-y;
background-position
background-position⽤来精确控制背景 图⽚在元素中的位置。
可以通过三种⽅式来确定图⽚在⽔平⽅向 和垂直⽅向的起点。
-关键字：top right bottom left center
-百分⽐
-数值
background-attachment
background-attachment⽤来设置背景图 ⽚是否随页⾯滚动。
可选值：
scroll：随页⾯滚动
fixed：不随页⾯滚动

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。