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;
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
最后更多分享：前端字节跳动真题解析
一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
549365770)]
最后更多分享：前端字节跳动真题解析
[外链图片转存中…(img-8kqagaI0-1712549365771)]
一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！ [外链图片转存中…(img-9UDO9P0G-1712549365771)]
推荐阅读
您阅读本篇文章共花了：
发表评论