欢迎光临
我的个人博客网站

CSS的背景


CSS的背景

1. 背景颜色background-color

div {     background-color: 颜色值; } 

一般情况下元素背景颜色默认是transparent(透明)。

2. 背景图片background-image

div {     background-image: none或url(图片的url); } 
参数值 作用
none 无背景图(默认值)
url 背景图片的url地址

注:

  • 实际开发中常见于logo、一些装饰性的小图片,或着是超大的背景图片
  • 优点是非常便于控制位置,例如运用在精灵图上

3. 背景平铺background-repeat

div {     background-repeat: repeat或no-repeat或repeat-x或repeat-y; } 
参数值 作用
repeat 背景图片在纵向和横向上平铺(默认值)
no-repeat 不平铺
repeat-x 在横向上平铺
repeat-y 在纵向上平铺

4. 背景图片位置background-position

div {     background-position: x y; } 

参数代表的意思是:x坐标和y坐标。可以使用方位名词精确单位

参数值 说明
length(精确单位) 百分数,或具体数值(记得加px)
position(方位名词) top,center,bottom,left,right
  1. 参数是精确单位时:
    • 第一个是x坐标,第二个是y坐标
    • 如果只指定一个数值,则该数值一定是x坐标,另一个默认垂直居中
  2. 参数是方位名词时:
    • 如果指定了两个方位名词,则两个值的顺序无关
    • 如果只指定了一个方位名词,则第二个值默认居中对齐
  3. 参数是混合单位时:
    • 第一个值是x坐标,第二个值是y坐标

5. 背景图像固定(背景附着)background-attachment

用于设置背景图像是否固定或随着页面的其余部分移动。

后期可以制作视差滚动的效果。

div {     background-attachment: scroll或fixed; } 
参数 作用
scroll 背景图像随对象内容滚动
fixed 背景图像固定

6. 背景复合写法

当使用简写时,没有特定的书写顺序,提倡顺序为:

background: 背景颜色 背景图片url地址 背景平铺 背景图像滚动 背景图片位置;

7. 背景色半透明

background: rgba(0,0,0,0.3); 

注:

  • 最后一个参数是alpha(透明度),取值范围在0~1之间
  • 可以把最后一个参数0.3的0省略,写为.3
  • rgba必须是4个值
  • 盒子背景半透明,盒子里面的内容不受影响
  • 这是CSS3新增属性,ie9+才支持

8. 总结

属性 作用
background-color 背景颜色 预定义颜色值、十六进制、rgb代码
background-image 背景图片 url(图片路径)
background-repeat 是否平铺 repeat、no-repeat、repeat-x、repeat-y
background-position 背景位置 length、position,分别是x和y坐标,单位px
background-attachment 背景附着 scroll、fixed
赞(0) 打赏
未经允许不得转载:张拓的天空 » CSS的背景
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏