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. 移动的距离就是这个目标图片的 xy 坐标。注意网页中的坐标有所不同
  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,一经查实,立即删除!

相关文章

【数据结构与算法】(一)数据结构相关的基本概念

文章目录 【数据结构与算法】(一)数据结构相关的基本概念前言1.1 数据结构的研究内容1.2 基本概念和术语1.2.1 数据、数据元素、数据项和数据对象1.2.2 数据结构1.2.3 数据类型和抽象数据类型 1.3 抽象数据类型的表示与实现1.4 算法和算法分析1.4.1 算法…

中国电子学会(CEIT)2021年09月真题C语言软件编程等级考试三级(含详细解析答案)

中国电子学会(CEIT)考评中心历届真题(含解析答案) C语言软件编程等级考试三级 2021年09月 编程题五道 总分:100分一、菲波那契数列(20分) 菲波那契数列是指这样的数列:数列的第一个和第二个数都为1,接下来每个数都等于前面2个数之和。给出一个正整数a,要求菲波…

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

红蓝对抗 红蓝对抗服务方案 在蓝队服务中,作为攻击方将开展对目标资产的模拟入侵,寻找攻击路径,发现安全漏洞和隐患。除获取目标系统的关键信息(包括但不限于资产信息、重要业务数据、代码或管理员账号等)外&#x…

9(10)-3-CSS 定位

个人主页:学习前端的小z 个人专栏:HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结,欢迎大家在评论区交流讨论! 文章目录 CSS 定位1 定位组成2 定位模式3 边偏移4 静态定位 static5 相对定位 relative…

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

2007 年,Apple Inc. 推出了这款震撼人心的智能手机,后来被称为 iPhone。您会惊讶地发现,迄今为止,Apple Inc. 已售罄 7 亿台 iPhone 设备。根据 2023 年 8 月的一项调查数据,95% 的智能手机利润都落入了苹果公司的口袋…

ubuntu同步网络时间

安装ntpdate sudo apt-get update sudo apt-get install ntpdate设置系统时间与网络时间同步 sudo ntpdate cn.pool.ntp.org设置时区亚洲上海 sudo cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime设置时间为24小时制 echo "LC_TIMEen_DK.UTF-8" >>/…

Django--方法

path() 方法 一个路由配置模块就是一个urlpatterns列表,列表的每个元素都是一项path,每一项path都是以path()的形式存在。 path()方法可以接收4个参数,其中前2个是必须的:route和view,以及2个可选的参数:k…

跨平台的组播测试工具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解析

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并发/线程等待/通知机制

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

16_USART串口发送和接收数据

USART串口发送和接收数据 USART串口发送和接收数据 USART串口发送和接收数据 主函数 #include "stm32f10x.h" // Device header #include "Delay.h" #include "LED.h" #include "Key.h" #include "stdint.h&q…

Linux mattrib命令教程:如何管理MS-DOS文件的属性(附实例详解和注意事项)

Linux mattrib命令介绍 mattrib 是一个用于更改MS-DOS文件属性标志的命令。它可以添加属性标志到一个MS-DOS文件&#xff08;使用 操作符&#xff09;或者移除属性标志&#xff08;使用 - 操作符&#xff09;。 Linux mattrib命令适用的Linux版本 mattrib 命令在大多数Linu…

【算法】寻找数组中心下标

题目 给定一个非空数组&#xff0c;找到一个元素&#xff0c;该元素左侧元素和等于其右侧元素和&#xff0c;返回该元素下标。 如果没有则返回-1&#xff0c;有多个则返回最左侧一个。 原理 1、双指针 定义两个变量&#xff0c;一个为从左侧累加的和 leftSum 0&#xff0c…

前端分页和后端分页

分页一般是前端分页还是后端分页 分页可以在前端或后端进行&#xff0c;具体取决于项目的需求和实现方式。以下是前端分页和后端分页的一些特点和适用场景&#xff1a; 前端分页&#xff1a; 特点&#xff1a;前端分页是指在前端&#xff08;浏览器端&#xff09;对数据进行分…

Ubuntu22.04中基于Qt开发Android App

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

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的重要贡献者Simon Riggs因一起坠机事故不幸离世。Simon Riggs是英国著名的软件与服务领导者&#xff0c;也是PostgreSQL的主要开发者和贡献者。事故发生在英国当地时间3月26日13:41分&#xff0c;当时他驾驶的私人通用航空Cirrus SR22飞机在英国达克斯福德机场…

java——文件上传

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

数学专题2 -最大公约数和最小公倍数

最大公约数和最小公倍数 1. 基础概念 1.1 质数的定义 质数(Prime Number)是一个重要的数学概念,它的定义如下: 如果一个大于1的自然数只有1和它本身两个因数,那么这个数就被称为质数(或素数)。 换句话说,对于一个质数 p p p,它满足以下条件: p p p 是一个大于1的自然数;如…

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

原型设计模式 模式动机模式定义模式结构模式分析深拷贝和浅拷贝原型模式实例与解析实例一&#xff1a;邮件复制&#xff08;浅克隆&#xff09;实例二&#xff1a;邮件复制&#xff08;深克隆&#xff09; 模式动机 在面向对象系统中&#xff0c;使用原型模式来复制一个对象自…