2024年最新【重识 HTML + CSS】背景相关知识点(1)，2024年最新2024最新阿里Web前端面试流程

最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

• 技术要深入到什么程度？

• 做久了技术总要转型管理？

• 我能做什么，我想做什么？

• 一技之长，就是深耕你的专业技能，你的专业技术。（重点）

• 独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）

• 拥有事业，选择一份使命，带领团队实现它。（创业）

一技之长分五个层次

• 栈内技术 - 是指你的前端专业领域技术

• 栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识

• 工程经验 - 是建设专业技术体系的“解决方案”

• 带人做事 - 是对团队协作能力的要求

• 业界发声 - 工作经验总结对外分享，与他人交流

永远不要放弃一技之长，它值得你长期信仰持有。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。

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 也可以实现图片链接

自学几个月前端，为什么感觉什么都没学到？？

---

这种现象在很多的初学者和自学前端的同学中是比较的常见的。

因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。

最重要的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么程度才算好，学了能做什么。

很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。

这就会给人一个错误的信息就是，我把资料上的学完了，估计也-就差不多的了。

但是真的是这样的吗？非也，因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线，你可以参考。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

还有很多的同学在学习的过程中一味的追求学的速度，很快速的刷视频，写了后面忘了前面，最后什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个所以然。

所以学习编程一定要注重实践操作，练习敲代码的时间一定要多余看视频的时间。