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

拼搏现实的明天。 2022-10-18 11:25 174阅读 0赞

### 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】知识点目录][HTML _ CSS]

# CSS 属性 - 背景 #

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

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

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

如果设置了多张图片：设置的**第一张图片将显示在最上面**，其他图片按顺序层叠在下面  
![在这里插入图片描述][20210605164901695.png]

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

示例代码：[01-background-image][]

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

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

*  `repeat`：平铺
 *  `no-repeat`：不平铺
 *  `repeat-x`：只在水平方向平铺
 *  `repeat-y`：只在垂直平方向平铺  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70]

示例代码：[background-repeat][]、[background-repeat\_02][background-repeat_02]

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

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

*  两个值分别是**宽度、高度**；只写一个代表**设置宽度，高度自动**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 1]

示例代码：[background-size][]

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

background-position 用于**设置背景图片在水平、垂直方向上的具体位置**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 2]

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

示例代码：[background-position][]

## 练习 - 滑动门技术 ##

如果是非纯色背景，并且左右还带有圆角等特殊效果，可以使用滑动门技术  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 3]  
代码：[练习-滑动门技术][-]

## 练习 - 大图适配 ##

需求：无论屏幕大小多少，都能看到中间的主要内容，并且居中显示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 4]

> **适配**：能让产品适应各种运行环境，尽量保持一致的用户体验  
> 在前端开发中，一般都是要做浏览器适配、屏幕适配  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 5]  
> 示例代码：[练习-大图适配][- 1]

## CSS Sprite（精灵图） ##

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

使用 CSS Sprite 的好处：

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

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

*  方法 1：Photoshop
 *  方法 2：[https://www.fedrobots.com/tool/imgSpirit/][https_www.fedrobots.com_tool_imgSpirit]

精灵图定位使用：`background-position: -500px -100px;`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 6]  
示例代码：[sprite][]

> CSS Sprite 编写建议，可以对每个图片进行单独的设置：  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 7]  
> 但是更建议写成如下形式，将公共的部分抽取出来，其余部分单独设置：  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 8]

## CSS 属性 - background-attachment ##

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

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

示例代码：[background-attachment应用][background-attachment]、[background-attachment][background-attachment 1]

## CSS 属性 - background ##

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

*  常用格式：`image position/size repeat attachment color`  
    `background-size` 可以省略，如果不省略，`/background-size` 必须紧跟在 `background-position` 的后面  
    其他属性也都可以省略，而且顺序任意
 *  示例 :![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 9]

示例代码：[background-image][]

## background 实现图片链接 ##

使用 background 也可以实现图片链接  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 10]  
建议：使用 a 和 img 实现图片链接，不要使用 background 实现图片链接，主要原因见 background-image 和 img 的选择。

示例代码：[图片链接][Link 1]

## CSS 属性 - cursor ##

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

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

cursor 除了可以设置系统自带的一些值以外，还可以设置图片  
![在这里插入图片描述][20210606101209209.png]

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

# background-image 和 img 的选择 #

利用 background-image 和 img 都能够实现显示图片的需求，在开发中该如何选择？  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70]  
总结：

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

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

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

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

# 背景相关的细节 #

## 文档画布的背景 ##

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

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

示例代码：[文档画布的背景][Link 2]

## 伪元素 ::first-line 的背景 ##

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

*  文字大小、容器宽度、文字对齐方式  
    ![在这里插入图片描述][20210606100647774.png]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 11]

[HTML _ CSS]: https://blog.csdn.net/weixin_43734095/article/details/117025820
[20210605164901695.png]: /images/20221014/ae260becd57749b9895bac8595dea072.png
[01-background-image]: https://gitee.com/szluyu99/html_css_note/blob/master/day08/02-%E8%83%8C%E6%99%AF/01-background-image.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70]: /images/20221014/82802afa6d2f4e8ab76912e7a7d616e7.png
[background-repeat]: https://gitee.com/szluyu99/html_css_note/blob/master/day08/02-%E8%83%8C%E6%99%AF/02-background-repeat.html
[background-repeat_02]: https://gitee.com/szluyu99/html_css_note/blob/master/day08/02-%E8%83%8C%E6%99%AF/02-background-repeat_02.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 1]: /images/20221014/7e69c909fae34f23b29da6873754e27d.png
[background-size]: https://gitee.com/szluyu99/html_css_note/blob/master/day08/02-%E8%83%8C%E6%99%AF/03-background-size.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 2]: /images/20221014/2a1ffb7591dc4226b84f9bcf1b86312d.png
[background-position]: https://gitee.com/szluyu99/html_css_note/blob/master/day08/02-%E8%83%8C%E6%99%AF/04-background-position.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 3]: /images/20221014/1cd9e9b6a10a4d9785419802b5cf8ef1.png
[-]: https://gitee.com/szluyu99/html_css_note/blob/master/day08/02-%E8%83%8C%E6%99%AF/05-%E7%BB%83%E4%B9%A0.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 4]: /images/20221014/1fd79aefff9d4afdbf6cf05f5601f601.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 5]: /images/20221014/a18907be8e4347d18298cbb844acfa61.png
[- 1]: https://gitee.com/szluyu99/html_css_note/blob/master/day08/02-%E8%83%8C%E6%99%AF/06-%E7%BB%83%E4%B9%A0.html
[https_www.fedrobots.com_tool_imgSpirit]: https://www.fedrobots.com/tool/imgSpirit/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 6]: /images/20221014/7697c64bae954c80a78021746c144584.png
[sprite]: https://gitee.com/szluyu99/html_css_note/blob/master/day08/02-%E8%83%8C%E6%99%AF/07-Sprite.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 7]: /images/20221014/ec855874c54e48d984dcb424b5857de2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 8]: /images/20221014/9f108ee1da514883942ee1514f7d7c8d.png
[background-attachment]: https://gitee.com/szluyu99/html_css_note/blob/master/day08/02-%E8%83%8C%E6%99%AF/08-background-attachment-%E5%BA%94%E7%94%A8.html
[background-attachment 1]: https://gitee.com/szluyu99/html_css_note/blob/master/day08/02-%E8%83%8C%E6%99%AF/08-background-attachment.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 9]: /images/20221014/9940a26d923546ba9a90b67e22267b23.png
[background-image]: https://gitee.com/szluyu99/html_css_note/blob/master/day08/02-%E8%83%8C%E6%99%AF/09-background.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 10]: /images/20221014/fc92296966464c15b49063b3e92303f1.png
[Link 1]: https://gitee.com/szluyu99/html_css_note/blob/master/day08/02-%E8%83%8C%E6%99%AF/12-%E5%9B%BE%E7%89%87%E9%93%BE%E6%8E%A5.html
[20210606101209209.png]: /images/20221014/56db950f8fad4c1bb57923fbf16a02fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_1_color_FFFFFF_t_70]: /images/20221014/65bdbe44f7c64c83848096a6e301be34.png
[background-image_img]: https://gitee.com/szluyu99/html_css_note/blob/master/day08/02-%E8%83%8C%E6%99%AF/10-img%E5%92%8Cbackground%E7%9A%84%E9%80%89%E6%8B%A9.html
[Link 2]: https://gitee.com/szluyu99/html_css_note/blob/master/day08/02-%E8%83%8C%E6%99%AF/11-%E6%96%87%E6%A1%A3%E7%94%BB%E5%B8%83%E7%9A%84%E8%83%8C%E6%99%AF.html
[20210606100647774.png]: /images/20221014/aab799a4c1b54364bd243ae6db69f861.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ_size_16_color_FFFFFF_t_70 11]: /images/20221014/3b1f8b9ec52f4878b5ebc927b1e53a8e.png