@Background

概述
属性
案例

概述 Overview

.背景background样式包含多个属性，如

背景颜色 background-color

背景图片 background-image

背景图片位置 background-position

背景图片大小 background-size

背景图片重复 background-repeat

.通常单个属性共同使用

.也可以使用复合属性，但是可读性不好，不建议

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

属性 Attributes

背景颜色 Background-color

. 为了后向兼容/容错，指定背景图片的同时，也指定颜色；俩者互不冲突；通常结合在一起使用

. 指定背景颜色还可以提示用户体验，避免大图片加载时的页面空白

背景图片 Background-image

. 可以使用传统的图片作为背景，也可以使用渐变背景作为图片[线性渐变、径向渐变、锥向渐变]；更多使用细节，参考后面专题

. 可以使用多个背景图片，使用逗号分隔；前面的图片会覆盖后面的图片

. 默认情况下，背景图像按照图片原始大小显示；当容器尺寸和图片尺寸不一致时，就会出现图片重复铺贴或图片被裁剪的情况

. 容器的尺寸>背景图片的尺寸，则默认情况下，背景图片会在水平和垂直方向上重复贴铺

. 容器的尺寸<背景图片的尺寸，图片被裁剪/部分显示；实际上背景图片还是会在水平和垂直方向上重复铺贴，只不过受容器尺寸大小限制，没有呈现出来

图像位置 Background-position

. 根据图片坐标/位置显示指定的内容；默认从左上角开始

. 可以使用关键字，如top、left、right、bottom；如前例

. 也可以使用具体数字或百分比

. 还可以关键字和数字、百分比组合使用

. 主要应用：精灵图和图片分隔

图像大小 Background-size

. 调整背景图像的尺寸大小

. 容器大，则重复平铺；容器小，则显示部分图片

. 背景图片大小；默认使用图片原始尺寸大小

. 终端尺寸变化时，易导致显示缺失；不能媒体自适应

. 使用复合属性时，应在background-position属性后面使用

background-size: length|percentage|cover|contain;

. 可以指定2个参数：宽、高‘通常只指定宽，高为auto，系统会按照图片比例，自动调整图片高度

. length：固定数值设置背景图片大小

. percentage：参考容器大小设置背景大小；200%就是2倍的容器大小；50%就是容器的一半

. cover：等比例最大化显示图片；容器被占满、图片可能被裁剪

. contain：完全显示图片；容器易出现留白

[] 按照指定像素大小显示背景图片

background-size: 100px 100px;

[] 按照容器宽度百分比显示背景图片- 20%：水平方向显示5张背景图片

background-size: 20%

[] 关键字cover

. 始终充满容器的显示图片；图片可能被裁剪

.bg-size {
    width:750px;
    max-width: 100%;
    height: 300px;
    background-image: url(../imgs/bg.jpg);
    background-size: cover;
}

[] contain

. 始终完整显示图片/包含图片

. 如果允许重复，则会显示多个图片背景；如果不允许，容器将呈现部分留白

.bg-size {
    width:750px;
    max-width: 100%;
    height: 300px;
    background-image: url(../imgs/bg.jpg);
    background-size: contain;
}

[] 改进方案

. 通常指定cover，并调整其位置position居中center显示

. 需要美工精心设计，保证图片的重点内容能够直观的表达出来

.bg-size {
    width:750px;
    max-width: 100%;
    margin: 0 auto;
    height: 300px;
    background-image: url(../imgs/bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

图形重复 Background-repeat

. 背景图片重复铺贴

background-repeat: auto|no-repeat|repeat-x|repeat-y

. auto：默认情况下，图片会水平和垂直方向上铺满整个容器

. no-repeat：不重复

. repeat-x：x轴重复

. repeat-y：y轴重复

. 如果图片尺寸大于容器尺寸，看不出重复效果；实际上也是铺贴了的

案例 Cases

使用原则

.装饰型元素多使用Background-image

.功能性元素多使用img；或者说如果去掉图片仍能正常显示就使用Background-image，否则应使用img

[] 背景点缀 - 位置、大小、不重复

1. 单背景：背景图片定位于右下角

[独立属性]

.single-img {
    height: 200px;
    background-color: rgba(255, 68, 0, 0.4);
    background-image: url(../imgs/logo0.png);
    background-position: right bottom;
    background-size: 50px;
    background-repeat: no-repeat;
}

[复合属性]

background: #a8e073 url(../imgs/logo0.png) right bottom/50px no-repeat;

2. 多背景：背景图片分别定位于左上角和右下角

[独立属性]

.multi-img {
    height: 200px;
    background-color: rgba(255, 68, 0, 0.4);
    background-image: url(../imgs/lg.png), url(../imgs/glc.png);
    background-position: right bottom, top left;
    background-size: 50px;
    background-repeat: no-repeat;
}

[复合属性]background-color放在后面

background: url(../imgs/logo0.png) right bottom/50px no-repeat, url(../imgs/logo1.png) top left/50px no-repeat;
background-color: #a8e073;

精灵图 sprite

. 为减少服务器的资源请求次数，将多个图片/图标有规则的排列在一张图上：根据具体位置，使用对应的图片

. 适合小图片/图标使用

. 由美工完成精灵图的制作

. 图片通常不做缩放

. 优点：一次请求，多次使用

. 缺点：图片尺寸调整后，需要重新制作精灵图；且不适合媒体自适应

. 现在大多使用字体图标代替

[] 京东宣传

多

品类齐全，轻松购物

块

多仓直发，极速配送

好

正品行货，精致服务

省

天天低价，畅选无忧

[提示]

.坐标轴向下是正y；向右是正x

.取消重复，只保留一个图片

.原始图片是308*234；对应的图片大小约为36*45，应该从[0,-189]开始显式；如果计算不出来，使用开发者视图F12调整：从左边顶部(0,0)开始调整至合适

[CSS]参考代码

.sprite .icon {
  width: 36px;
  height: 45px;
  background-image: url(./web/imgs/jd.png);
  background-repeat: no-repeat;
}

.sprite .more {
    background-position: 0 -189px;
}

.sprite .fast {
    background-position: -41px -189px;
}

.sprite .good {
    background-position: -82px -189px;
}

.sprite .save {
    background-position: -123px -189px;
}

[] 自定义目录 - 水平方向重复铺贴

背景图片尺寸小于容器尺寸
1
背景图片采用水平重复
6
采用flex布局
9

[传统方法]为什么整个百分比加起来不是100%？

.cont span:nth-child(1) {
  width: 5%;
  display: inline-block;
}

.dot-bg {
  display: inline-block;
  width: 90%;
  height: 3px;
  background-image: url(./web/imgs/dot.png);
  background-repeat: repeat-x;
  vertical-align: middle;
}

.cont span:nth-child(3) {
  width: 3%;
  display: inline-block;
}

[flex]

.dot-bg {
    flex: 1;
    height: 3px;
    background-image: url(../imgs/dot.png);
    background-repeat: repeat-x;
}

图片分割

. 将图片水平分隔为若干片，每个元素显示其中一片

. 每个元素显示的图片位置为：(当前片数-1) /（总片数-1)：从0到100%分成若干段；第一段从0开始；最后一段在100%结束

. 为了媒体自适应，每片的背景图片大小background-size应为总片数*100%

. 为查看效果，以下各例采用hover触发特效，且采用公共类tile；任意调试尺寸均无异常

.tile {
    width: 320px;
    height: 180px;
    margin: 2rem auto;
    display: flex;
}

[] 2片

.2个点平分100%

.第一片在开始0，第二片在结束100%；每片的位置：0、100%

[HTML]

<div class="tile tile-2">
    <div></div>
    <div></div>
</div>

[CSS]

.tile-2>div {
    flex: 1;//2等分
    background-image: url(../imgs/bg.jpg);
    background-size: 200%;//2倍大小
    background-repeat: no-repeat;
}

.tile-2>div:nth-child(1) {
    background-position: 0;
}

.tile-2>div:nth-child(2) {
    background-position: 100%;
}

.tile-2>div:hover {
    transform: translateY(1rem);
}

[] 3片

.3个点平分100%

.第一片在开始0，第三片在结束100%；第二片在中间50%；每片的位置：0、50%、100%

[HTML]

<div class="tile tile-3">
    <div></div>
    <div></div>
    <div></div>
</div>

[CSS]

.tile-3>div {
    flex: 1;
    background-image: url(../imgs/bg.jpg);
    background-size: 300%;//3倍
    background-repeat: no-repeat;
}

.tile-3>div:nth-child(1) {
    background-position: 0;
}

.tile-3>div:nth-child(2) {
    background-position: 50%;
}

.tile-3>div:nth-child(3) {
    background-position: 100%;
}

.tile-3>div:hover {
    transform: translateY(1rem);
}

[] 4片

.4个点平分100%

.第一片在开始0，第四片在结束100%；每片的位置：0、33.3%、66.7%、100%

[HTML]

<div class="tile tile-4">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

[CSS]

.tile-4>div {
    flex: 1;
    background-image: url(../imgs/bg.jpg);
    background-size: 400%;//4倍
    background-repeat: no-repeat;
}

.tile-4>div:nth-child(1) {
    background-position: 0;
}

.tile-4>div:nth-child(2) {
    background-position: 33.3%;
}

.tile-4>div:nth-child(3) {
    background-position: 66.7%;
}

.tile-4>div:nth-child(4) {
    background-position: 100%;
}

.tile-4>div:hover {
    transform: translateY(1rem);
}

[] 使用内联变量优化

[HTML]

<div class="tile tile-4 adv">
    <div style='--pos:0'></div>
    <div style='--pos:1'></div>
    <div style='--pos:2'></div>
    <div style='--pos:3'></div>
</div>

[CSS]

.tile-4.adv div {
  background-position: calc(var(--pos)*100%/(4 - 1));
}

[] banner滑动

. 使用过渡动画 transition

. 静态采用默认位置

. hover时采用右上位置

. 图片要大于容器

.slider-bg {
    height: 150px;
    background-image: url(../imgs/banner.jpg);
    transition: 2s;
}

.slider-bg:hover {
    background-position: right top;
}

[] 综合应用 - 折角/狗耳朵[进阶]

.dog {
    position: relative;
    background-image: linear-gradient(210deg, transparent 3em, #ddd 0);
    border-radius: 1em;
    overflow: hidden;
}

.dog::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(-120deg, #888 3em, transparent 0);
    border-radius: 1em;
    transform-origin: top right;
    transform: rotate(150deg) translate(5em, -3em);
}

总结与作业 Summary & Homework

总结: . 背景 background的使用; . 过渡动画 transition; . 伪类选择器 :hover
作业: 1. 完成精灵图; 2. 分别完成2张、3张、4张、5张图片的分割，并总结其规律；将其应用到个人网站顶部的banner或其它地方