乐趣区

关于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

属性值 作用
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(主动调整缩放比例,把图片扩大到展现区域最大化)

退出移动版