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

最新推荐文章于 2024-03-31 11:59:30 发布

萌宅鹿同学

最新推荐文章于 2024-03-31 11:59:30 发布

阅读量373

点赞数

分类专栏： # 《HTML + CSS 深度》文章标签： css html html5 background sprite

本文链接：https://blog.csdn.net/weixin_43734095/article/details/117592992

版权

《HTML + CSS 深度》专栏收录该内容

17 篇文章 2 订阅

订阅专栏

本文详细解读CSS背景属性，包括background-image设置背景图片，background-repeat控制图片重复，background-size调整图片尺寸，background-position定位图片，以及CSSSprite的运用和背景固定。此外，还将介绍背景链接、cursor样式和文档画布背景设置。

摘要由CSDN通过智能技术生成

博文集合：【重识 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 的值