关于css:本节介绍css的背景属性以及应用效果

本节介绍 css 的背景属性以及利用成果

1. css 罕用的背景属性
2. 背景利用

3. css3 新增背景属性

   css 罕用背景属性

   css 中的背景是由 background 属性来设置背景的，它是一个综合属性，能够拆分为繁多的属性

背景色彩 background-color
属性名：background-color
作用：在盒模型 border 以内区域扭转或者增加背景色彩
代码示范：

div{background-color: red;}

背景图片 background-image
属性名：background-image
属性值：url（门路）
作用：给盒子增加图片背景，图片不够覆盖住盒子会反复铺满盒子背景
代码示范：

div{background-image: url();/* 图片门路 */
}

背景反复 background-repeat
属性名：background-repeat
作用：设置增加背景图是否反复进行加载
属性值：repeat（默认值）、no-repeat、repeat–x、repeat–y

代码示范：

div{background-repeat:no-repeat}

背景定位 background-position
属性名：background-position
作用：设置不反复图片的加载地位
属性值：left、right、center、top、center、bottom、px、%，必须要有两个值，一个 x 轴，一个 y 轴
代码片段

背景附着 background-attachment
属性名：background-position
作用：设置背景图片是否随着页面滚动
属性值：scroll、fixed（固定）

综合写法 background
属性值：能够有 1 - 5 个属性值，值之间用空格隔开，背景定位的两个属性值不能被离开写，算作其中的一个属性值，五个属性值地位能够随便书写
代码片段

背景利用

以图换字

个别 h1 标签是权重最高的，外部会搁置最重要内容，比方 logo 图片、最大的题目等
h1 外部文字也能够进步 seo 搜寻排名又想应用文字且应用图片就须要用到以图换字

div{
   text-indent:-30em;

   white-space:nowrap;

   overflow:hidden;
}

精灵图利用

精灵图利用：当用户拜访网站时，网页上每一张图都要通过一次申请能力展示给用户，然而网页中有许多小背景图作润饰，会 影响网页的加载速度 ，这时候就要将小 背景图集合成一张图片 进行加载
实际操作：
1、要设置好背景图的宽度
2、精灵图放的都是装璜的小背景图
3、精灵图能够 x 轴、y 轴摆放
代码片段

css3 新增背景属性

背景半透明
rgba 模式：在 rgb 根底减少一个透明度，取值范畴 0 -1，值越小，透明度越高
书写形式：rgba(红色，绿色，蓝色，不透明度)
留神：透明度只对背景有用，内容不影响
代码示范：

        *{
            margin: 0;
            padding: 0;
        }
        div{
            border: 1px solid red;
            width: 400px;
            height: 400px;
            margin: 100px auto;
            background-color:rgba(232, 211, 255,0.2);
        }

背景缩放 background-size
作用：缩放背景图的比例大小
属性值：px 值、%、cover（主动调整缩放比例，溢出会被暗藏）、contain（主动调整缩放比例，把图片扩大到展现区域最大化）