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

个人主页：学习前端的小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.mzph.cn/news/795027.shtml

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

相关文章

深度剖析：网络安全中的红蓝对抗策略

深度剖析：网络安全中的红蓝对抗策略

红蓝对抗 红蓝对抗服务方案 在蓝队服务中，作为攻击方将开展对目标资产的模拟入侵，寻找攻击路径，发现安全漏洞和隐患。除获取目标系统的关键信息（包括但不限于资产信息、重要业务数据、代码或管理员账号等）外&#x…
阅读更多...
如何在iPhone上恢复永久删除的照片？

如何在iPhone上恢复永久删除的照片？

2007 年，Apple Inc. 推出了这款震撼人心的智能手机，后来被称为 iPhone。您会惊讶地发现，迄今为止，Apple Inc. 已售罄 7 亿台 iPhone 设备。根据 2023 年 8 月的一项调查数据，95% 的智能手机利润都落入了苹果公司的口袋…
阅读更多...
跨平台的组播测试工具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…
阅读更多...
android11 SystemUI入門之KeyguardPatternView解析

android11 SystemUI入門之KeyguardPatternView解析

view层级树为&#xff1a; 被包含在 keyguard_host_view.xml中 。 <?xml version"1.0" encoding"utf-8"?> <!-- This is the host view that generally contains two sub views: the widget viewand the security view. --> <com.andro…
阅读更多...
并发编程01-深入理解Java并发/线程等待/通知机制

并发编程01-深入理解Java并发/线程等待/通知机制

为什么我们要学习并发编程&#xff1f; 最直白的原因&#xff0c;因为面试需要&#xff0c;我们来看看美团和阿里对 Java 岗位的 JD&#xff1a; 从上面两大互联网公司的招聘需求可以看到&#xff0c; 大厂的 Java 岗的并发编程能力属于标配。 而在非大厂的公司&#xff0c; 并…
阅读更多...
Ubuntu22.04中基于Qt开发Android App

Ubuntu22.04中基于Qt开发Android App

文章目录 前言在Ubuntu22.04中配置开发环境案例测试参考 前言 使用Qt开发手机应用程序是一种高效且灵活的选择。Qt作为一个跨平台的开发框架&#xff0c;为开发者提供了统一的开发体验和丰富的功能库。首先&#xff0c;Qt的跨平台性让开发者可以使用相同的代码库在不同的操作系…
阅读更多...
Error: TF_DENORMALIZED_QUATERNION: Ignoring transform forchild_frame_id

Error: TF_DENORMALIZED_QUATERNION: Ignoring transform forchild_frame_id

问题 运行程序出现&#xff1a; Error: TF_DENORMALIZED_QUATERNION: Ignoring transform for child_frame_id “odom” from authority “unknown_publisher” because of an invalid quaternion in the transform (0.0 0.0 0.0 0.707) 主要是四元数没有归一化 Eigen::Quatern…
阅读更多...
【PostgreSQL】技术传承：使用Docker快速部署PostgreSQL数据库

【PostgreSQL】技术传承：使用Docker快速部署PostgreSQL数据库

前言 PostgreSQL的重要贡献者Simon Riggs因一起坠机事故不幸离世。Simon Riggs是英国著名的软件与服务领导者&#xff0c;也是PostgreSQL的主要开发者和贡献者。事故发生在英国当地时间3月26日13:41分&#xff0c;当时他驾驶的私人通用航空Cirrus SR22飞机在英国达克斯福德机场…
阅读更多...
java——文件上传

java——文件上传

一、文件上传——简介 文件上传的简介&#xff1a;文件上传是指将本地计算机中的文件传输到网络上的服务器或另一台计算机上的过程。在 Web 开发中&#xff0c;文件上传通常指的是将用户通过 Web 页面提交的文件&#xff08;如图像、文档、音频、视频等&#xff09;传输到服务器…
阅读更多...
设计模式总结-原型设计模式

设计模式总结-原型设计模式

原型设计模式 模式动机模式定义模式结构模式分析深拷贝和浅拷贝原型模式实例与解析实例一&#xff1a;邮件复制&#xff08;浅克隆&#xff09;实例二&#xff1a;邮件复制&#xff08;深克隆&#xff09; 模式动机 在面向对象系统中&#xff0c;使用原型模式来复制一个对象自…
阅读更多...
MySQL 50 道查询题汇总，足以巩固大部分查询（附带数据准备SQL、题型分析、演示、50道题的完整SQL）

MySQL 50 道查询题汇总，足以巩固大部分查询（附带数据准备SQL、题型分析、演示、50道题的完整SQL）

目录 MySQL 50 道查询题&#xff0c;足以巩固大部分查询数据准备&#xff1a;创建表sql添加表数据sql 50道查询题目汇总01 - 05 题&#xff1a;1、查询 “01” 语文成绩比 “02” 数学成绩高的学生的信息及课程分数2、查询 "01语文课程"比"02数学课程"成绩…
阅读更多...
Linux云计算之网络基础9——园区网络架构项目

Linux云计算之网络基础9——园区网络架构项目

要求构建大型园区网络架构&#xff0c;方案如下&#xff1a; 园区A 园区c 公司B 要求&#xff1a; 1、A公司园区网络 一台汇聚层三层交换机&#xff0c;两台接入层二层交换机。 出口有一台路由器。 2、A园区有五台服务器。 分别为两台 WEB 服务器&#xff0c;…
阅读更多...
java数据结构与算法刷题-----LeetCode405. 数字转换为十六进制数

java数据结构与算法刷题-----LeetCode405. 数字转换为十六进制数

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 文章目录 分组位运算 分组位运算 这道题正常来说可以用转换7进制的思想来&…
阅读更多...
PTA C 1050 螺旋矩阵（思路与优化）

PTA C 1050 螺旋矩阵（思路与优化）

本题要求将给定的 N 个正整数按非递增的顺序&#xff0c;填入“螺旋矩阵”。所谓“螺旋矩阵”&#xff0c;是指从左上角第 1 个格子开始&#xff0c;按顺时针螺旋方向填充。要求矩阵的规模为 m 行 n 列&#xff0c;满足条件&#xff1a;mn 等于 N&#xff1b;m≥n&#xff1b;且…
阅读更多...
【蓝桥杯-读数据】

【蓝桥杯-读数据】

蓝桥杯-读数据 P8598 [蓝桥杯 2013 省 AB] 错误票据 P8598 [蓝桥杯 2013 省 AB] 错误票据 这道题本身很简单&#xff0c;最大的难点在于读入数据。 #include<bits/stdc.h> using namespace std; #define int long long const int N 2e5 10; int a[N]; signed main()…
阅读更多...
探寻马来西亚服务器托管的优势与魅力

探寻马来西亚服务器托管的优势与魅力

随着全球跨境业务的不断增加&#xff0c;境外服务器成为越来越受欢迎的选择。在这其中&#xff0c;马来西亚服务器备受关注&#xff0c;其机房通常位于马来西亚首都吉隆坡。对于客户群体主要分布在东南亚、澳大利亚和新西兰等地区的用户来说&#xff0c;马来西亚服务器是一个理…
阅读更多...
SV学习笔记（七）

SV学习笔记（七）

类型转换 写在前面 类型转换可以分为 静态转换和动态转换 。静态转换即需要在转换的表达式前 加上单引号 即可&#xff0c;该方式并不会对转换值做检查。如果发生转换失败&#xff0c;我们也无从得知。动态转换即需要使用 系统函数$cast(tgt&#xff0c; src) 做转换。静态转…
阅读更多...
CountDownLatch 详解

CountDownLatch 详解

CountDownLatch 用法详解 CountDownLatch 详解1 原理2 常见用法3 方法介绍4 示例及使用 CountDownLatch 详解 CountDownLatch&#xff08;倒计时门闩&#xff09;是Java并发包中的一个工具类&#xff0c;用于协调多个线程之间的同步。它允许一个或多个线程等待其他线程完成操作…
阅读更多...
【软件工程】测试规格

【软件工程】测试规格

1. 引言 1.1简介 本次的测试用例是基于核心代码基本开发完毕&#xff0c;在第一代系统基本正常运行后编写的&#xff0c;主要目的是为了后续开发与维护的便利性。 该文档主要受众为该系统后续开发人员&#xff0c;并且在阅读此文档前最后先阅读本系统的需求文档、概要设计文…
阅读更多...
谷歌推出多模态视频模型，自动生成丰富动作视频

谷歌推出多模态视频模型，自动生成丰富动作视频

谷歌的研究人员推出了一款多模态扩散模型——VLOGGER。 用户只需要向VLOGGER输入图像、语音&#xff0c;就能生成带语音、丰富动作的人物视频。VLOGGER基于扩散模型开发而成&#xff0c;并提出了一种全新的架构&#xff0c;将文本生成图像模型与空间、时间控制相结合&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023