11-1(2)-CSS 背景+CSS 精灵图

news2025/1/19 15:43:36

个人主页：学习前端的小z
个人专栏：HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结，欢迎大家在评论区交流讨论！

文章目录

  • 一、CSS 背景
    • 1 背景颜色
    • 2 背景色半透明
    • 3 背景图片
    • 4 背景平铺
    • 5 背景图片位置
    • 6 背景图片大小
    • 7 背景图片定位-了解
    • 8 背景图片剪切-了解
    • 9 背景图像固定（背景附着）-了解
    • 10 背景复合写法
  • 二、CSS 精灵图
    • 1 为什么需要精灵图
    • 2 精灵图（sprites）的使用
    • 3 精灵技术的使用
    • 4 制作精灵图

一、CSS 背景

通过 CSS 背景属性，可以给页面元素添加背景样式。

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

1 背景颜色

background-color 属性定义了元素的背景颜色。

background-color:颜色值;

一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色。

background-color:transparent;

2 背景色半透明

CSS3 为我们提供了背景颜色半透明的效果。

background-color: rgba(0, 0, 0, 0.3);
  • 最后一个参数是 alpha 透明度，取值范围在 0~1之间
  • 我们习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3);
  • 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响

3 背景图片

background-image 属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)

background-image : none | url (url)

取值：

值说明
url(‘URL’)图像的URL
none无图像背景会显示。这是默认

注意：背景图片后面的地址，千万不要忘记加 URL， 在css文件或者style标签里面尽量加引号，行内样式里面的路径不要加引号。

4 背景平铺

如果需要在 HTML 页面上对背景图像进行平铺，可以使用 background-repeat 属性。

background-repeat: repeat | no-repeat | repeat-x | repeat-y

取值：

值说明
repeat背景图像将向垂直和水平方向重复。这是默认
repeat-x只有水平位置会重复背景图像
repeat-y只有垂直位置会重复背景图像
no-repeatbackground-image 不会重复

5 背景图片位置

利用 background-position 属性可以改变图片在背景中的位置。

background-position: x y;

参数代表的意思是：x 坐标和 y 坐标。 可以使用 方位名词 或者 精确单位

值描述
left、right、center
top、bottom、center		如果仅指定一个关键字，其他值将会是"center"
x% y%第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％
xpos ypos第一个值是水平位置，第二个值是垂直。左上角是0。单位一般是像素（0px 0px）。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions

参数是方位名词

  • 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
  • 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

参数是精确单位

  • 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
  • 如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中

参数是混合单位

  • 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

6 背景图片大小

background-size 设置背景图片大小。

图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

background-size: length|percentage|cover|contain;

取值：

值描述
length设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度，各个值之间以空格 隔开指定高和宽，以逗号 , 隔开指定多重背景。如果只给出一个值，第二个是设置为"auto(自动)"
cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

cover 和 contain 都是按图片宽高比展示，

cover - 水平或者垂直方向不满足宽高比会被剪裁，比如宽>高，那么宽会被剪裁，高就会完全呈现，反之亦然

contain - 水平或者垂直方向不满足宽高比会被留白，比如宽>高，那么水平方向就被留白，反之亦然，都会完全出来呈现

7 背景图片定位-了解

background-origin属性指定background-position属性应该是相对位置。

background-origin: padding-box|border-box|content-box;

取值：

值描述
padding-box背景图像填充框的相对位置，默认值
border-box背景图像边界框的相对位置
content-box背景图像的相对位置的内容框

8 背景图片剪切-了解

background-clip属性指定背景绘制区域。

background-clip: border-box|padding-box|content-box;

取值：

值说明
border-box默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box背景绘制在衬距方框内（剪切成衬距方框）。
content-box背景绘制在内容方框内（剪切成内容方框）。

9 背景图像固定（背景附着）-了解

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment 后期可以制作视差滚动的效果。

主布局滚动：想要图片背景固定，加上fixed

局部滚动：想要图片背景固定，加上scroll，否则指定local随页面滚动而滚动

background-attachment : scroll | fixed

取值：

值描述
scroll背景图片随着页面的滚动而滚动，这是默认的。
fixed（主布局）背景图片不会随着页面的滚动而滚动。
local背景图片会随着元素内容的滚动而滚动。

scroll和local的区别：scroll相对于元素固定，而local是相对于元素内容固定。也就是说，在存在内部滚动条的情况下，scroll就相当于fixed，而local就相当于scroll。

当谈及background-attachment时需要考虑两种不同的观点：主视图(浏览器窗口)和局域视图(你可以在上面的演示中看到这点)。

scroll是默认值。它与主视图一起滚动，但在局域视图中保持固定。

一般用途：

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响;

background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。

其他：如果背景图像background-attachment是"固定"，background-origin属性没有任何效果。

10 背景复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性 background 中。从而节约代码量。

当使用简写属性时，没有特定的书写顺序,一般习惯约定顺序为：

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment;
background: transparent url(image.jpg) repeat-y fixed top ;

各值之间用空格分隔，不分先后顺序。可以只有其中的某些值，例如 background：#FF0000 url(smiley.gif); 是允许的。

个人主页：学习前端的小z
个人专栏：HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结，欢迎大家在评论区交流讨论！

文章目录

  • 一、CSS 背景
    • 1 背景颜色
    • 2 背景色半透明
    • 3 背景图片
    • 4 背景平铺
    • 5 背景图片位置
    • 6 背景图片大小
    • 7 背景图片定位-了解
    • 8 背景图片剪切-了解
    • 9 背景图像固定（背景附着）-了解
    • 10 背景复合写法
  • 二、CSS 精灵图
    • 1 为什么需要精灵图
    • 2 精灵图（sprites）的使用
    • 3 精灵技术的使用
    • 4 制作精灵图

二、CSS 精灵图

1 为什么需要精灵图

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。

因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度， 出现了 CSS 精灵技术（也称CSS Sprites、CSS 雪碧）。

核心原理：将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了。

精灵技术目的：为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度

百度精灵图：

在这里插入图片描述

2 精灵图（sprites）的使用

  1. 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中
  2. 这个大图片也称为 sprites 精灵图 或者 雪碧图
  3. 移动背景图片位置， 此时可以使用 background-position
  4. 移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同
  5. 因为一般情况下都是往上往左移动，所以数值是负值
  6. 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置

3 精灵技术的使用

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用 CSS 的 background-image、background-repeat 和 background-position 属性进行背景定位，其中最关键的是使用 background-position 属性精确地定位。

.bg-tp1 {
  width: 20px;
  height: 20px;
  background: url("css_sprites.png") -10px -10px;
}

.bg-tp2 {
  width: 20px;
  height: 20px;
  background: url("css_sprites.png") -50px -10px;
}

.bg-tp3 {
  width: 20px;
  height: 20px;
  background: url("css_sprites.png") -10px -50px;
}

.bg-tp4 {
  width: 20px;
  height: 20px;
  background: url("css_sprites.png") -50px -50px;
}

4 制作精灵图

精灵图制作网

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图。

大部分情况下，精灵图都是网页美工做，不过前端也要自食其力不要过度依赖美工。

我们精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放。

我们精灵图的宽度取决于最宽的那个背景。

我们可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适。

在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1571863.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

6 种事件驱动的架构模式

6 种事件驱动的架构模式

事件驱动架构(Event-Driven Architecture)是一种基于事件和事件处理的软件架构，它的核心思想是将系统的行为和逻辑抽象成一系列事件，这些事件在系统中按照一定的规则和顺序产生和传播，并被相应的处理器处理。事件驱动架构具有高度的灵活性、可…
阅读更多...
跨平台的组播测试工具mping、udp_sender及udp_reciver的源码及使用教程

跨平台的组播测试工具mping、udp_sender及udp_reciver的源码及使用教程

文章目录 1.前言2.mping工具编译3.mping工具使用3.1 参数说明3.1 组播播发（-s）3.1 组播播发（-r）3.3 Linux下mping测试 4.Linux组播udp_sender及udp_reciver使用4.1 udp_sender源码4.1 udp_reciver源码4.3 编译方法4.4 测试使用4.4…
阅读更多...
ensp华为AC+AP上线配置

ensp华为AC+AP上线配置

AR1配置&#xff1a; <Huawei>system-view # 进入系统视图<Huawei>sysname R1 # 设备重命名[R1]dhcp enable # 开启DHCP功能[R1]interface GigabitEthernet0/0/0 # 进入接口 [R1-GigabitEthernet0/0/0]ip address 192.168.0.1 23 # 配置接口地址 [R1-GigabitE…
阅读更多...
Redis -- 缓存雪崩问题

Redis -- 缓存雪崩问题

缓存雪崩是指在同一时段大量的缓存key同时失效或者Redis服务宕机&#xff0c;导致大量请求到达数据库&#xff0c;带来巨大压力。 可能原因 : 同一时间大量的key到期 ; 解决方案&#xff1a; 给不同的Key的TTL添加随机值 利用Redis集群提高服务的可用性 给缓存业务添加降…
阅读更多...
背包问题---

背包问题---

一、背包模型 有一个体积为V的背包，商店有n个物品，每个物品有一个价值v和体积w，每个物品只能被拿一次，问能够装下物品的最大价值。 这里每一种物品只有两种状态即"拿"或"不拿". 设状态dp[i][j]表示到第i个物品为止，拿的物品总体积为j的情况下的最大价…
阅读更多...
日本垄断半导体行业什么

日本垄断半导体行业什么

日本垄断了光刻胶&#xff0c;没有光刻胶&#xff0c;有光刻机没有用&#xff0c;还有垄断硅片关键材料&#xff0c;没有这个&#xff0c;想要生产芯片根本就不可能&#xff0c;除此之外该有很多半导体原材料垄断&#xff0c;半导体行业无法绕开日本。
阅读更多...
vue + koa + Sequelize + 阿里云部署 + 宝塔：宝塔数据库连接

vue + koa + Sequelize + 阿里云部署 + 宝塔：宝塔数据库连接

之前文章已经介绍了宝塔上传前后端代码并部署&#xff0c;不清楚的请看这篇文章&#xff1a; vue koa 阿里云部署 宝塔&#xff1a;宝塔前后端部署 下面是宝塔创建数据库&#xff1a; 我用的 koa Sequelize 连接的数据库&#xff0c;Sequelize 非常适合前端使用&#xf…
阅读更多...
214基于matlab的交互多模算法（IMM）机动目标跟踪算法

214基于matlab的交互多模算法（IMM）机动目标跟踪算法

基于matlab的交互多模算法&#xff08;IMM&#xff09;机动目标跟踪算法&#xff0c;完整的15页文档论文。根据二维空间内目标作匀速直线运动和匀速圆周运动的特点&#xff0c;在建立目标运动模型和观测模型的基础上采用基于交互多模算法&#xff08;IMM&#xff09;的卡尔曼滤…
阅读更多...
常用软件架构模式优缺点及应用场景

常用软件架构模式优缺点及应用场景

1、分层架构模式 最常见的架构模式就是分层架构或者称为 n 层架构。大部分软件架构师、设计师和开发者都对这个架构模式非常熟悉。尽管对于层的数量和类型没有具体限制&#xff0c;但大部分分层架构主要由四层组成&#xff1a;展现层、业务层、持久层和数据库层&#xff0c;如…
阅读更多...
159 Linux C++ 通讯架构实战14，epoll 函数代码实战

159 Linux C++ 通讯架构实战14，epoll 函数代码实战

ngx_epoll_init函数的调用 //&#xff08;3.2&#xff09;ngx_epoll_init函数的调用&#xff08;要在子进程中执行&#xff09; //四章&#xff0c;四节 project1.cpp&#xff1a;nginx中创建worker子进程&#xff1b; //nginx中创建worker子进程 //官方nginx ,一个…
阅读更多...
第1个Django应用及Django的请求处理

第1个Django应用及Django的请求处理

Python学习之路系列文章目录 python面向对象之警察与匪徒火拼场景模拟python面向对像之第二次笔记Django环境搭建及测试第1个Django应用及Django的请求处理 第1个Django应用及Django的请求处理 Python学习之路系列文章目录一、PyCharm创建django项目二、创建app什么是app怎么创…
阅读更多...
Python环境搭建—安装PyCharm开发工具

Python环境搭建—安装PyCharm开发工具

&#x1f947;作者简介&#xff1a;CSDN内容合伙人、新星计划第三季Python赛道Top1 &#x1f525;本文已收录于Python系列专栏&#xff1a; 零基础学Python &#x1f4ac;订阅专栏后可私信博主进入Python学习交流群&#xff0c;进群可领取Python视频教程以及Python相关电子书合…
阅读更多...
RTPS协议概述

RTPS协议概述

一.RTPS协议概述 RTPS协议主要由四个部分组成&#xff1a; 1.发现模块&#xff08;Discovery&#xff09; ​ 发现模块是定义了RTPS的参与者&#xff08;Participant&#xff09;获取其他RTPS的参与者&#xff08;Participant&#xff09;&#xff0c;端点&#xff08;Endpo…
阅读更多...
前端与后端协同：实现Excel导入导出功能

前端与后端协同：实现Excel导入导出功能

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…
阅读更多...
docker搭建EFK(未完待续)

docker搭建EFK(未完待续)

目录 elasticsearch1.创建网络2.拉取镜像3.创建容器如果出现启动失败&#xff0c;提示目录挂载失败&#xff0c;可以考虑如下措施 开放防火墙端口4.验证安装成功重置es密码关闭https连接创建kibana用户创建新账户给账户授权 kibana1.创建容器2.验证安装成功3.es为kibana创建用户…
阅读更多...
C++(13): 智能指针shared_ptr

C++(13): 智能指针shared_ptr

1. 概述 shared_ptr智能指针&#xff0c;本质是“离开作用域会自动调整(减小)引用计数&#xff0c;如果引用计数为0&#xff0c;则会调用析构函数”。这样一来&#xff0c;就进化成类似于int、float等的一种会被自动释放的类型。 2. 初始化智能指针 初始化一个智能指针的方式比…
阅读更多...
LoRa自组网络设计 6

LoRa自组网络设计 6

1 深入了解LoRaWan 1.1 LoRaWan概述 LoRaWAN采用星型无线拓扑 End Nodes 节点 Gateway 网关 Network Server 网络服务器 Application Server 应用服务器 LoRa联盟是2015年3月Semtech牵头成立的一个开放的、非盈利的组织&#xff0c;发起成员还有法国Actility&#xff0c;中国…
阅读更多...
非关系型数据库-----------探索 Redis高可用 、持久化、性能管理

非关系型数据库-----------探索 Redis高可用 、持久化、性能管理

目录 一、Redis 高可用 1.1什么是高可用 1.2Redis的高可用技术 二、 Redis 持久化 2.1持久化的功能 2.2Redis 提供两种方式进行持久化 三、Redis 持久化之----------RDB 3.1触发条件 3.1.1手动触发 3.1.2自动触发 3.1.3其他自动触发机制 3.2执行流程 3.3启动时加载…
阅读更多...
（学习日记）2024.04.04：UCOSIII第三十二节：计数信号量实验

（学习日记）2024.04.04：UCOSIII第三十二节：计数信号量实验

写在前面&#xff1a; 由于时间的不足与学习的碎片化&#xff0c;写博客变得有些奢侈。 但是对于记录学习&#xff08;忘了以后能快速复习&#xff09;的渴望一天天变得强烈。 既然如此 不如以天为单位&#xff0c;以时间为顺序&#xff0c;仅仅将博客当做一个知识学习的目录&a…
阅读更多...
javaweb学习（day11-监听器Listener过滤器Filter)

javaweb学习（day11-监听器Listener过滤器Filter)

一、监听器Listener 1 Listener介绍 Listener 监听器它是 JavaWeb 的三大组件之一。JavaWeb 的三大组件分别是&#xff1a;Servlet 程 序、Listener 监听器、Filter 过滤器 Listener 是 JavaEE 的规范&#xff0c;就是接口 监听器的作用是&#xff0c;监听某种变化(一般就是对…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023