【重识 HTML ，Java程序员面试笔试宝典

• 水平方向还可以设值：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的选择

背景相关的细节

==========================================================================

文档画布的背景

---

面试准备+复习资料分享：

为了应付面试也刷了很多的面试题与资料，现在就分享给有需要的读者朋友，资料我只截取出来一部分哦，有需要的可以来找我获取哈

获取方式：点击蓝色字体即可免费获取

---

面试准备+复习资料分享：

为了应付面试也刷了很多的面试题与资料，现在就分享给有需要的读者朋友，资料我只截取出来一部分哦，有需要的可以来找我获取哈

获取方式：点击蓝色字体即可免费获取

[外链图片转存中…(img-Pl84ISKj-1630171726600)]