HTML+CSS初学日常知识点-四

一.背景

1.background-color 背景颜色

2.background-image 背景图片 值: url("图片路径")

background-image: url(img/png.png);

3.background-repeat 背景平铺方式

        repeat    默认 水平垂直都平铺

  no-repeat    不平铺

        repeat-x      水平平铺

        repeat-y      垂直平铺

 

4.background-position 背景图片位置

 x轴坐标    y坐标；
 x，y取值：可以数值+单位 或  百分比  或 英文单词

5.background-size 背景图片大小

 width值    height值；
 width，height取值： 可以是数值+单位，或百分比，或英文单词cover、
 contain 把背景图片等比例扩展至最大尺寸，以使背景图片的宽度或高度 适应背景区域可能背景区域有留白
 cover 把背景图片等比例扩大至足够大，以使背景图片铺满整个背景区域，可能使图片裁剪

6.background-attachment  背景图片是否固定

        scroll   默认   背景图片随网页滚动
        fixed   背景图片固定不动

缩写：background : bg-color值    bg-image值   bg-repeat值   bg-position值 / bg-size值  

            bg-attachment值 ；

二.CSS精灵

  1.简介

全称:CSS Sprites,是一种网页图片应用处理方式，它允许将一个页面涉及到的所有零星图片都包含到一张大图中，访问页面时避免图片载入缓慢的现象。 

2.优点

利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能，这也是CSS Sprites最大的优点。