Background

背景图片

• 设置背景图片:background-image:url();
• 注意点:
  • 1.图片地址放在()中，可以为本地图片，也可以是网络图片地址
  • 2.如果图片尺寸小于标签，那么会自动在水平和垂直方向平铺和填充
  • 3.如果网页上出现了图片，那么浏览器会在此再次发送请求获取图片
• 控制背景图片的平铺方式
  • background-repeat属性
    • 取值:repeat(默认),no-repeat,repeat-x,repeat-y
• 应用场景:通过背景图片的平铺来降低图片的大小，提升网页的访问速度

如何控制背景图片的位置

• background-position属性
• 格式:background-position 水平方向 垂直方向;
• 取值
  • 具体的方位名词
    • 水平方向:left center right
    • 垂直方向:top center bottom
  • 具体的像素
    • 一定要写单位:px
    • 可以为负

背景属性缩写的格式

• background:背景颜色 背景图片 平铺方式 关联方式 定位方式;
• 注意点:background属性中，任何一个属性都可以省略

背景的关联方式(了解)

• 默认情况下背景图片会随着滚动条的滚动而滚动，如果不想，则修改关联方式
• background-attachment:取值scroll，随着滚动;fixed，固定。

背景图片和插入图片的区别

• 1.背景图片仅仅是一个装饰，不会占用位置，而插入图片会占用位置
• 2.背景图片有定位属性，可以方便的控制图片的位置，而插入图片等位置不容易控制器
• 3.插入图片的语义比背景图片的语义强，所以在企业开发中如果你的图片想要被搜索引擎收录，那么推荐使用插入图片

CSS精灵图

• CSS精灵图是一种图像合成技术
• 作用:可以减少请求的次数，以及可以降低服务器的处理压力
• 工具:adobe fireworks CS6

• 通过工具获取精灵图中指定小图片的位置和尺寸，设置标签的背景尺寸和background-position:偏移量就能显示指定小图

  • 例如:小图位置 x:425 y:200 w:86 h:28

  .box{
            background-image: url("images/weibo.png");
            width: 86px;
            height:28px;
            background-position: -425px -200px;
        }
  

  background-size

  • 具体像素，具体百分比 100px,100px 50%,50%
  • 宽度等比拉伸 auto,100px
  • 高度等比拉伸 100px,auto
  • cover 等比拉伸并填充至父元素宽度和高度
  • contain 等比拉伸并填充父元素宽度或者高度

背景图片定位区域属性

• background-origin
• 告诉系统背景图片从什么区域开始显示
• 取值:
  • padding-box 默认情况下背景图片就是从padding区域开始显示
  • border-box 从外边距开始显示
  • content 从内容区域开始显示

背景绘制区域属性

• background-clip
• 默认情况下背景颜色从外边距开始绘制
• 取值:
  • border-box 默认
  • padding-box 内边距区域开撕绘制
  • content-box 内容区域开始绘制

多重背景图片

• 格式:background:url() no-repeat lert top,ul() no-repeat right top;
• 先添加的背景图片会覆盖后添加的背景图片