css设置背景颜⾊背景图像背景图像平铺背景图像位置背景图像固定显⽰综合设
置元素背景的⽅法(。。。
⼀、设置背景颜⾊
在CSS当中,⽹页元素的背景颜⾊使⽤background-color属性来设置,和⽂本颜⾊的⽤法类似。
⽤法
<style>
h2{
color:red;
backround-color:blue;
font-family:"⿊体"
}
body{
background-color:blue;
/*设置整个⽹页的背景颜⾊*/
}
</style>
⼆、背景图像的设置⽅法
css中将图像作为⽹页元素的背景,可以⽤backguound-image属性添加
<style>
body{
background-image:url(图像路径)
css固定定位/*将指定图像平铺显⽰为整个页⾯背景*/
}
</style>
注意:背景图⽚会覆盖背景颜⾊
三、背景图像的平铺的属性值
默认情况下背景图像会⾃动沿着⽔平和竖直两个⽅向平铺,如果想改变平铺⽅式,可使⽤如下属性:
background-repeat:沿⽔平和竖直两个⽅向平铺(默认值)
background-no-repeat:不平铺,图像位于元素左上⾓,只显⽰⼀次
repeat-x:沿⽔平⽅向平铺
repeat-y:沿竖直⽅向平铺
⽤法:
body{
background-image:url("meishi.jpg");
background-repeat: repeat-y;
}
四、背景图像位置的设置⽅法
background-position属性⽤于设置背景图像的定位⽅式;
位置属性取值含义与写法
像素单位数值图像左上⾓在元素的具体坐标background-position:20px(⽔平距离) 20px(竖直距离);
预定义的关键字⽔平⽅向:left/center/right、垂直⽅向:top/center/bottom
百分⽐取值0% 0%:图像左上⾓与元素左上⾓对齐、50% 50%图像50% 50%中⼼的点与元素50% 50%中⼼的对齐位置属性取值含义与写法
⽤法:
body{
background-image:url("图⽚路径");
background-repeat: repeat-y;
background-position: left center;/*图像位置属性*/
}
五、背景图像的固定显⽰
如果⽹页元素过多,则背景图像会随着元素⼀同滚动,这是可以使⽤background-attachment属性固定背景的元素;
含义固定属性取值
scroll图像随页⾯元素滚动(默认值)
fixed图像固定在页⾯,不随页⾯元素滚动
六、综合设置元素的背景
在CSS中,背景属性、padding、margin都是复合属性,可以将背景相关的杨树综合在⼀个复合属性background中
写法:
background:背景⾊ url(“图像”) 平铺定位 固定;
如:
body{
background:url(xxx.jpg) no-repeat 50px 80px fixed;
}
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论