乐趣区

关于css:CSS-常用样式-–-背景属性

jiezi

一、背景色彩 background-color

  • 属性名：background-color
  • 作用：在盒子区域增加背景色彩的润饰
  • 加载区域：在 border 及以内加载背景色彩
  • 属性值：色彩名、色彩值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 200px;
            height: 200px;
            padding: 30px;
            border: 5px dashed red;
            margin: 20px;
            background-color: slateblue;
        }
    </style>
</head>
<body>
    <div class="box"> 背景色彩 </div>  
</body>
</html>

二、背景图片 background-image

  • 属性名：background-image
  • 作用：给盒子增加图片的背景润饰
  • 加载范畴：默认的加载到边框及以内局部。前期如果图片不反复加载，加载从 border 以内开始
  • 属性值：url(图片门路)
  • url：uniform resource locator，对立资源定位符，小括号外部书写查找图片的门路
.box {
            width: 200px;
            height: 200px;
            padding: 30px;
            border: 5px dashed red;
            margin: 20px;
            /* background-color: slateblue;  背景色彩 */
            background-image: url(images/lagouwang.jpg);
        }
  • 如果图片不反复，从 border 以内开始加载
  • 背景图和背景色彩能够同时设置，背景图会压盖背景色彩，没有背景图的区域会显示背 景色彩

三、背景反复 background-repeat

  • 属性名：background-repeat
  • 作用：设置增加的背景图是否要在盒子中反复进行加载
  • 依据属性值不同，有四种反复加载形式

| 属性值 | 作用 |
| repeat | 反复，默认属性值，示意会应用背景图片反复加载填满整个盒子背景区域 |
| no-­repeat | 不反复，不管背景图是否大于盒子范畴，都只加载一次图片 |
| repeat-­-x | 程度反复，应用背景图片程度反复加载铺满第一行，垂直方向不反复 |
| repeat-­-y | 垂直反复，应用背景图片垂直反复加载铺满第一列，程度方向不反复 |

.box {
            width: 200px;
            height: 200px;
            padding: 30px;
            border: 5px dashed red;
            margin: 20px;
            /* background-color: slateblue;  背景色彩 */
            background-image: url(images/lagou_small.jpg);
            /* background-repeat: repeat; */
            /* background-repeat: no-repeat; */
            /* background-repeat: repeat-x; */
            background-repeat: repeat-y;
        }

四、背景定位 background-position

  • 属性名：background-position
  • 作用：次要用于设置不反复的图片在背景区域的加载开始地位
  • 属性值：分为三种写法，单词表示法、像素表示法、百分比表示法。不管哪种写法
  • 属性值都有两个，值之间用空格分隔
  • 第一个属性值：示意背景图片在程度方向的地位
  • 第二个属性值：示意背景图片在垂直方向的地位

①、单词表示法

  • 属性值都是应用代表方向的单词进行书写
  • 程度方向可选单词：left、center、right
  • 垂直方向可选单词：top、center、bottom
  • 单词示意图片与盒子背景区域进行对应方向的对齐
background-position: right bottom; /* 对应方向对齐 */

②、像素表示法

  • 应用像素值作为背景定位的属性值
  • 第一个属性值：像素是几，示意背景图片左上角针对 border 以内的左上顶点 程度方向 位移的间隔
  • 第二个属性值：像素是几，示意背景图片左上角针对 border 以内的左上顶点 垂直方向 位移的间隔
background-position: 50px 50px;

像素值辨别正负，正负代表位移方向不同：

  • 负数：示意图片针对盒子的原点向右、向下挪动
  • 正数：示意图片针对盒子的原点向左、向上挪动

百分比表示法应用百分比数字作为属性值

  • 100% 代表的数值：
  • 程度方向，等价于盒子的 border 以内的背景区域宽度减去图片的宽度
  • 垂直方向，等价于盒子的 border 以内的背景区域高度减去图片的高度

五、背景附着 background-attachment

  • 属性名：background-attachment
  • 作用：设置的是背景图片是否要随着页面或者盒子的滚动而滚动。属性值

| 属性值 | 阐明 |
| scroll | 滚动的，示意背景图片与盒子放弃绝对地位不变，随着页面的滚动而滚走 |
| fixed | 固定的，背景图的定位的参考点从盒子 border 以内的左上顶点变为了浏览器窗口的左 上顶点，页面滚动时，浏览器窗口的左上顶点是不变的，导致背景图固定在浏览器窗口的某个地位，不会随着页面滚动而滚走 |

六、综合写法 background

  • background 属性能够将五个繁多属性的值进行合写
  • 属性值：能够有 1-5 个属性值，值之间用空格进行分隔，背景定位的两个属性值算作 一个属性值，不能被离开也不能颠倒程序。五个属性值之间能够调换地位
 body {background: url(images/bj.jpg) no-repeat center top scroll #666;
      }

注意事项：

①、如果属性值没有设置齐全，其余没有设置的繁多属性会依照默认值加载

background: pink;

②、如果想去层叠综合属性中的一部分，其余的属性放弃不变，最好应用繁多属性写法进行层叠

body {background: url(images/bj.jpg) no-repeat center top  #666;
          background-attachment: scroll;
      }

七、背景利用

①、替换插入图

  • h1 标签是权重最高的标签，个别会在外部书写最重要的内容，比方 logo 图片、最大的题目等
  • 另外 <h1> 外部的文字，能够帮忙进步 SEO 搜寻排名
  • 在设置的是 logo 图片时，如果应用插入图，就不能书写搜寻关键字
<h1>
    <a href=""><img src="images/lagouwang.jpg"> </a>
</h1>

背景图替换插入图办法

  • 如果想解决 SEO 问题，能够将 HTML 构造中，插入图换成搜寻关键字，而后应用 css 增加背景图给标签或标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    h1 {
        width: 200px;
        height: 100px;
    }

    h1 a {
        display: block;
        width: 200px;
        height: 100px;
        background: url(images/lagou_small.jpg) no-repeat;
    }

</style>

</head>
<body>

    <h1>
        <a href=""> 明天 | 太阳 | 真好 |666 </a>
    </h1>

</body>
</html>

文字暗藏办法

1、将字号设置为 0。IE8 及以上或高版本 浏览器能够暗藏文字，然而 IE7 及以下有 兼容问题

font-size: 0;

2、能够设置给标签一个 text-indent 属性，属性值为负的很大的值，文字会走到盒子内部，间接再设置溢出暗藏属性，将溢出文字暗藏

h1 a {
        display: block;
        width: 200px;
        height: 100px;
        background: url(images/lagou_small.jpg) no-repeat;
        /* font-size: 0; */
        text-indent: -20em;
        overflow: hidden;
    }

②、padding 区域背景图

  • 在一个盒子中有背景图局部，而且有文字内容，文字会让开背景图区域进行加载，背景区域应该应用 padding 挤出地位
  • 四个方向的 padding 都可能用于增加背景图
.list {
        width: 300px;
        padding-left: 10px;
        border: 1px solid #000;
        margin: 10px;
        list-style: none;
        font: 16px/32px "楷体"
    }

    .list li {
        padding-left: 25px;
        background: url(images/tubiao.png) no-repeat left center ;

    }

③、精灵图技术

  • 当用户拜访一个网站时，须要向服务器发送申请，网页上的每张图像都要通过一次申请能力展示给用户
  • 然而，一个网页中往往会利用很多小的背景图像作为润饰，当网页中的图像过多时，服务器就会频繁地承受和发送申请，这将大大降低页面的加载速度
  • 为了无效地缩小服务器承受和发送申请的次数，进步页面的加载速度，呈现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）

css 精灵

  • CSS 精灵是一种解决网页背景图像的形式
  • 它将一个页面波及到的所有零星背景图像都集中到一张大图中去，而后将大图利用于网页，这样，当用户拜访该页面时，只需向服务发送一次申请，网页中的背景图像即可全副展现进去
  • 通常状况下，这个由很多小的背景图像合成的大图被称为精灵图

css 精灵的技术根据

  1. 将网页中须要用到的小尺寸背景图制作成一张背景通明的 png 图片
  2. 利用背景定位技术，将精灵图的每个小图片加载到对应的标签上

制作精灵图的注意事项

  1. 精灵图上放的都是小的装璜性质的背景图片，插入图片不能往上放
  2. 精灵图的宽度取决于最宽的那个背景图片的标签宽度
  3. 精灵图能够横向摆放也能够纵向摆放，然而每个图片之间必须留够足够的空白，保障背景图片加载到一个标签外部时，不能呈现多余内容
  4. 在精灵图的最底端，尽量留一点空白，不便当前增加其余精灵图

能够通过网上的在线进行制作精灵图

八、CSS3 新增背景属性

①、背景半透明

  • CSS3 反对背景半透明的写法，色彩值减少了一种 rgba 模式
  • rgba 模式：在 rgb 根底上减少了一个不透明度的设置，不透明度 alpha 取值范畴在 0-1 之间，0 示意齐全通明，1 示意齐全不通明，0.5 示意半透明
  • 书写形式：rgba(红色，绿色，蓝色，不透明度)
  • 留神：背景半透明是指盒子背景半透明，盒子外面的内容不受影响
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        p{
            width: 100px;
            height: 100px;
        }
        .p1 {background-color: rgba(0, 255, 0, 1);
        }
        .p2 {background-color: rgba(0, 255, 0, 0.5);
        }
    </style>

</head>
<body>
    <p class="p1"> 原 </p>
    <p class="p2"> b 半透明  </p>
</body>
</html>

同样，能够给文字和边框通明，都是 rgba 的格局来写

color: rgba(0,0,0,0.5);
border: 1px solid rgba(0,0,0,0.5);

②、背景缩放 background-size

通过 background-size 设置背景图片的尺寸，就像咱们设置 <img> 的尺寸一样，在挪动 Web 开发中做屏幕适配利用十分宽泛

| 属性值 | 阐明 |
| px 值 | 1 – 2 个像素值，只设置 1 个值，垂直方向等比例拉伸，设置 2 个值，依照设置值加载 |
| 百分比 | 同像素值设置办法雷同，设置百分比时，数值参照盒子的宽、高属性 |
| cover | 主动调整缩放比例，把背景图像扩大至足够大，以使背景图像齐全笼罩背景区域，如有溢出局部则会被暗藏 |
| contain | 主动调整缩放比例，把图像图像扩大至最大尺寸，保障图片始终残缺显示在背景区域 |

.box1 {background-size: 50px 50px;}

.box2 {background-size: 50% 50%;}

.box3 {background-size: cover;}
.box4 {background-size: contain;}

<div class="box1"> px 值 </div>
<div class="box2"> 百分比 </div>
<div class="box3"> cover </div>
<div class="box4"> contain </div>

③、多背景

  • CSS3 中规定，一个盒子上，能够增加多个背景图片
  • background-image 的属性值书写时，以逗号分隔多背景的 URL 门路地址
  • 留神：背景加载时，先写的背景压盖后写的背景图片
 background-image: url(images/pdx.jpg) ,url(images/lagouwang.jpg);
退出移动版