background 背景

CSS 属性 - 背景
- CSS 属性 - background-image 设置元素背景图片
- CSS 属性 - background-repeat 设置背景图片是否平铺
- CSS 属性 - background-size 设置背景图片大小
- CSS 属性 - background-position 设置背景图片具体位置
- 练习 - 滑动门技术
- 练习 - 大图适配
- CSS Sprite（精灵图）
- CSS 属性 - background-attachment
- CSS 属性 - background
- background 实现图片链接
- CSS 属性 - cursor
background-image 和 img 的选择
背景相关的细节
- 文档画布的背景
- 伪元素 ::first-line 的背景

博文集合：【重识 HTML + CSS】知识点目录

CSS 属性 - 背景

CSS 属性 - background-image 设置元素背景图片

background-image 用于设置元素的背景图片

会盖在 background-color 的上面
在图片的透明区域，可以看到背景色

如果设置了多张图片：设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面

注意：如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的

示例代码：01-background-image

CSS 属性 - background-repeat 设置背景图片是否平铺

background-repeat 用于设置背景图片是否要平铺

repeat：平铺
no-repeat：不平铺
repeat-x：只在水平方向平铺
repeat-y：只在垂直平方向平铺

示例代码：background-repeat、background-repeat_02

CSS 属性 - background-size 设置背景图片大小

background-size 用于设置背景图片的大小

两个值分别是宽度、高度；只写一个代表设置宽度，高度自动

示例代码：background-size

CSS 属性 - background-position 设置背景图片具体位置

background-position 用于设置背景图片在水平、垂直方向上的具体位置

水平方向还可以设值：left、center、right
垂直方向还可以设值：top、center、bottom
如果只设置了 1 个方向，另一个方向默认是 center
比如 background-position: 80px; 等价于 background-position: 80px center;

示例代码：background-position

练习 - 滑动门技术

如果是非纯色背景，并且左右还带有圆角等特殊效果，可以使用滑动门技术

代码：练习-滑动门技术

练习 - 大图适配

需求：无论屏幕大小多少，都能看到中间的主要内容，并且居中显示

适配：能让产品适应各种运行环境，尽量保持一致的用户体验
在前端开发中，一般都是要做浏览器适配、屏幕适配

示例代码：练习-大图适配

CSS Sprite（精灵图）

CSS Sprite（CSS 雪碧、CSS 精灵）是一种 CSS 图像合成技术，将各种小图片合并到一张图片上，利用 CSS 的背景定位来显示对应的图片部分。

使用 CSS Sprite 的好处：

减少网页的 http 请求数量，加快网页响应速度，减轻服务器压力
减小图片总大小
解决了图片命名的困扰，只需要针对一张集合的图片命名
更换风格方便，只需要在少数张图片上修改图片的颜色或样式，整个网页的风格就可以改变

Sprite 图片制作（雪碧图、精灵图）

方法 1：Photoshop
方法 2：https://www.fedrobots.com/tool/imgSpirit/

精灵图定位使用：background-position: -500px -100px;

示例代码：sprite

CSS Sprite 编写建议，可以对每个图片进行单独的设置：

但是更建议写成如下形式，将公共的部分抽取出来，其余部分单独设置：

CSS 属性 - background-attachment

background-attachment 可以设置以下 3 个值

scroll：背景图片跟随元素一起滚动（默认值）
local：背景图片跟随元素以及元素内容一起滚动
fixed：背景图片相对于浏览器窗口固定

示例代码：background-attachment应用、background-attachment

CSS 属性 - background

background 是一系列背景相关属性的简写属性

常用格式：image position/size repeat attachment color
background-size 可以省略，如果不省略，/background-size 必须紧跟在 background-position 的后面
其他属性也都可以省略，而且顺序任意
示例 :

示例代码：background-image

background 实现图片链接

使用 background 也可以实现图片链接

建议：使用 a 和 img 实现图片链接，不要使用 background 实现图片链接，主要原因见 background-image 和 img 的选择。

示例代码：图片链接

CSS 属性 - cursor

cursor 可以设置鼠标指针（光标）在元素上面时的显示样式

auto：浏览器根据上下文决定指针的显示样式，比如根据文本和非文本切换指针样式
default：由操作系统决定，一般就是一个小箭头
pointer：一只小手，鼠标指针挪动到链接上面默认就是这个样式
text：一条竖线，鼠标指针挪动到文本输入框上面默认就是这个样式
none：没有任何指针显示在元素上面

cursor 除了可以设置系统自带的一些值以外，还可以设置图片

url( ) 后面的 2 个数字分别代表图片在水平、垂直方向上的偏移，不能设置负数
0 和 0 代表图片左上角和指针是重叠的，数值变大，图片左上角会朝着指针左上角方向偏移
如果水平、垂直分别设置为图片宽高的一半，图片的中心点将和指针重叠
如果图片找不到，就会使用 pointer 作为 cursor 的值

background-image 和 img 的选择

利用 background-image 和 img 都能够实现显示图片的需求，在开发中该如何选择？

总结：

img：作为网页内容的重要组成部分，比如广告图片、LOGO 图片、文章配图、产品图片
background-image：可有可无。
有，能让网页更加美观；无，也不影响用户获取完整的网页内容信息

宗旨：在没有任何 CSS 样式的情况下，用户也能浏览到网页中完整的内容信息

PS：网络出现问题或服务器出现问题时，有可能会导致 CSS 文件加载失败

示例代码： background-image和img的选择

背景相关的细节

文档画布的背景

没有 HTML 元素对应着文档画布，如何设置文档画布的背景？

html 或者 body 元素的背景都能够延伸到整个文档画布
如果同时设置了 html 和 body 元素的背景，根元素 html 的背景才会作为文档画布背景
建议通过 body 元素来设置文档画布背景

示例代码：文档画布的背景

伪元素 ::first-line 的背景

::first-line 虽然意为第一行内容，但是它的背景并不一定填满一行，取决于各种因素

文字大小、容器宽度、文字对齐方式

【重识 HTML + CSS】背景相关知识点相关推荐

【重识 HTML + CSS】知识点目录
重识 HTML + CSS 前言基本 HTML 标签基本 CSS 属性 CSS 选择器 CSS 特性 HTML 列表.表格.表单 HTML 元素类型盒子模型相关知识点 Photoshop 简单使 ...
【重识 HTML + CSS】盒子模型相关知识点
盒子模型盒子模型 (Box Model) 宽度.高度相关 CSS 属性 - width.height 内边距相关 CSS 属性 - padding 外边距相关 CSS 属性 - margin [常见 ...
【重识 HTML + CSS】项目实战
项目实战常见项目目录 CSS Reset CSS 编码规范浏览器私有前缀 CSS 知识补充 CSS 属性 - white-space CSS 属性 - text-overflow image-se ...
【重识 HTML + CSS】官方文档的阅读
官方文档 CSS 属性的描述 CSS 属性的取值组合 (combinators) 出现次数 (multipliers) 类型 (types) < number >.< intege ...
【重识 HTML + CSS】浮动
浮动 CSS 属性 - float 浮动的规则浮动的应用浮动存在的问题:高度坍塌清浮动的常见方法 CSS 属性 - clear 各种定位方案对比博文集合:[重识 HTML + CSS]知识点目 ...
【重识 HTML + CSS】定位
定位标准流 (Normal Flow) CSS 属性 - position relative - 相对定位 static - 静态定位 fixed - 固定定位画布 (Canvas) 和视口 (V ...
【重识 HTML + CSS】Photoshop 简单使用
Photoshop Photoshop 简介常用功能常用面板常用设置单位设置标尺设置颜色模式设置移动工具设置增加画布大小常用快捷键矩形选框工具 (D) 裁剪工具.切片工具 (C) ...
【重识 HTML + CSS】元素类型、display、visibility、overflow
元素类型元素类型块级.行内级元素替换.非替换元素元素的分类总结 CSS 属性 - display inline-block 练习 - 邮箱显示与选择练习 - 分页跳转栏 display 的其 ...
【重识 HTML + CSS】列表、表格、表单
HTML 元素列表有序列表 ol.li 无序列表 ul.li 定义列表 dl.dt.dd 列表相关的 CSS 属性 list-style 练习表格 table 的常用属性 tr 的常用属性 th ...

【重识 HTML + CSS】背景相关知识点