前端的学习之路：初级CSS---雪碧图

最新推荐文章于 2024-01-28 14:04:50 发布
最新推荐文章于 2024-01-28 14:04:50 发布
阅读量96 收藏
点赞数
分类专栏： 初级CSS 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44647555/article/details/113774972
版权

雪碧图


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
        <title>雪碧图</title>
        <!-- <link rel="stylesheet" href="../chujicss/css/11.25.01.css"> -->
        <style type="text/css">
        /* 
        
        */
			/* 
             雪碧图的使用步骤：
                1、先确定要使用的步骤
                2、测量图标的大小
                3、根据测量结果创建一个元素
                4、将雪碧图设置为元素的背景图片
                5、设置一个偏移量一以显示正确的图片
			 */
			.box1{
				width:313px;
				height: 381px;
				background-image: url(../chujicss/chujicss\ img/11.25.02.PNG);
				background-position: 0 0;
			}
			.box2{
				width: 137px;
				height: 54px;
				background-image: url(../chujicss/chujicss\ img/11.25.02.PNG);
				background-position: -26px -603px;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>

运行结果为：
在这里插入图片描述
代码引用的图片是：
在这里插入图片描述

new-SkyWaller
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web前端开发基础：CSS控制-标记制作导航菜单.ppt
06-06
--*-- 1 单元目标 2 教学内容 3 动手实践 4 课堂小结 单元目标 CSS控制标记制作导航菜单 能力目标 学会使用 CSS控制标记 知识目标 《CSS网页样式设计与制作》 参考资料 2 教学内容 1 单元目标 3 动手实践 4 课堂小结...
【前端小实战】百度新闻雪碧图及动画（CSS sprites）
qq_53569667的博客
01-13 1361
模仿百度新闻右侧电梯雪碧图效果，实现了雪碧图的应用。
一篇文章教你学会如何使用CSS中的雪碧图（CSS Sprite）
道阻且长，行则将至。
03-15 1万+
一篇文章教你学会如何使用CSS中的雪碧图（CSS Sprite） 一、什么是雪碧图？ 雪碧图（CSS Sprite）又叫CSS精灵图，是一种网页图片应用处理方式，他允许你将一个页面设计到 所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，由从前的多次请求变为一次请求，客户端显示一张图片都会向服务器发送请求，所以图片请求越多，造成延迟的可能性就越大，当页面有许多字体图标时，推荐使用CSS Sprite 。 想必大家都用过雪碧图吧，话不多说，看看雪碧图是啥玩意儿： 看看金立官网的雪碧图： 二、那
雪碧图的原理与实例解释
猛志的博客
10-16 3595
一、原理 1.多个图标组合成一张图片构成雪碧图，通过对不同部位的提取，实现不同效果显示 如下图（图1）： 2.雪碧图优点：加载一张图片在来对一张图片操作，相比于加载多张图片来说，占用资源更少，效率更快。 3.原理 （1）上图片左上角坐标为（0px 0px）,使用笛卡尔坐标系； （2）上图有10个图标，上下两行两两对应； （3）用一个与图标宽高相等的盒子来装一个图标，把图片设为盒子背景图片时整张图片都会显示在盒子里，这时要把图片大小放大500%； （4）当鼠标移到盒子上时，移动图片，显示光亮图标。把图标上下
三分钟学会如何使用css雪碧图（Sprite）
MMccGrady的博客
09-07 2370
雪碧图是一种网页图片处理方式。我们制作一张网页往往需要用到很多的图片，如果都用img导入，每张图片都需要向服务器发送请求，图片多了，服务器的负担就大了，用户使用过程中延迟也会增加。雪碧图通过将小图片整合在一张大图中，这样访问页面时大大减少了向服务器发送请求的次数。 往下↓看
Web前端之背景、雪碧图
花&败
10-29 761
repeatrepeat-xrepeat-yno-repeattopleftrightbottomcentercenterborder-boxborder-boxautocovercontainscrollfixed可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置并且该样式没有顺序要求，也没有哪个属性是必须写的orginclip。
前端学习代码之-css3
04-12
前端学习代码之-css3练习代码
前端学习之路-css笔记.docx
07-17
前端学习之路-css笔记.docx
universe-ui:CSS组件库-使用普通CSS构建
03-16
宇宙UI 一个CSS组件库-使用普通CSS构建。
css-sprite使用详解
09-25
主要介绍了css-sprite的使用详解,css-sprite是一个经常被用来合并前端图片的工具.需要的朋友可以参考下
【Web前端实操16】雪碧图（CSS精灵图）
最新发布
qq_45498824的博客
01-28 550
CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去。实现效果没有做很长，依次类推，可以慢慢根据距离做出雪碧图，如有不解，可以在评论区评论，共同进步。雪碧图一般会给一个完整的图片，主要利用。属性设置背景图像的起始位置。
精灵图/雪碧图介绍
weixin_43368552的博客
06-13 2328
为啥精灵图又叫雪碧图？精灵图（英语：Sprite），又被称为雪碧图或拼合图。在计算机图形学中，当一张二维图像集成进场景中，成为整个显示图像的一部分时，这张图就称为精灵图[1]。常见碳酸饮料雪碧的英文名也是 Sprite，因此也有人会使用雪碧图的非正式译名场景：项目中将多张小图片，合并为一张大图片，这张大图片就是精灵图 优点：减少服务器接收发送次数，减轻服务器的压力，提高页面加载速度。 例如把八张小图片的请求变成一张图片的请求，减少请求，减轻带宽，减少服务器压力 精灵图的使用： 1.创建一个盒子，设置盒子大
web前端技术笔记（五）雪碧图、布局实例、图片格式
行者
03-19 721
雪碧图 雪碧图，就是将网页制作中使用的多个小图片合并成一个图片，使用css技术将这张合成的图片应用在网页不同的地方，雪碧图可以减少网页加载时的http请求数，优化网页性能。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>雪碧图列表</title> <style type="text/css"> .list{
前端研习录（14）——CSS雪碧图及字体图标讲解及示例说明
清风不渡
08-03 520
重拾前端记忆，记录学习笔记，现在进入CSS雪碧图及字体图标部分。以上便是雪碧图的使用方法及效果。以上就是字体图标的内容。
关于雪碧图
蜗牛先生
08-24 6470
前端新手在入门的时候，一定会听到一个名词，叫做“雪碧图”，什么是雪碧图呢？   注意：这个雪碧跟那个饮料雪碧不是一个玩意儿。。。   ▍含义 也叫CSS sprites精灵图，通俗来说就是有很多小图标合成的一张大的图片就做雪碧图。   ▍为什么要用雪碧图 在网页中使用雪碧图的主要目的是为了优化页面性能，因为页面中的每一张图片都需要提一次HTTP请求过去，当图片过多的时候会使得加载量...
雪碧图的概念及优缺点，以及行盒的简述
qq_43204488的博客
12-22 2821
什么是雪碧图？它的优缺点是什么？ 1.雪碧图的概念：实际是指CSS中的图片拼合技术，将多个背景图拼合在同一张图片上，在使用时按照需求对图片位置进行改动。 优点：当多个图片合成一张图片时，减少了加载网页时对图片的加载次数，减轻了服务器的压力，提高了页面加载的速度。 缺点：使用时需要注意设置的数据的准确性，避免在某些板块出现不相关的背景图，还有就是必须使用高分辨率的图片，避免图片放大后出现瑕疵；当某一...
前端基础入门之背景background-image 、 雪碧图与渐变
LoveSummer
06-22 1万+
在介绍背景之前，首先需要做好准备工作：安装 PS 与基本设置这里就不详细介绍 PS 的安装了，因为网上一抓一大把，主要介绍 PS 的基本设置左侧工具栏调成 2 列，更方便使用右侧工具栏不需要的视图统统关掉修改单位为像素由于一般默认的单位是厘米，所以这里需要修改在历史记录、颜色或色板附近，打开选项卡，选择打开，修改中的与为可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色示例 1 背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置并且该样式没有顺序要求，也没有哪个属性是必须写的注意示
前端中关于雪碧图的操作
雪落无痕的博客
06-05 1393
关于web中小图标的操作
教你来使用雪碧图（CSS sprite）
热门推荐
Allenyhy的博客
08-07 6万+
什么是雪碧图？ 雪碧图是根据CSS sprite音译过来的，就是将很多很多的小图标放在一张图片上，就称之为雪碧图。 使用雪碧图的目的：有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多很多的小图标，浏览器在显示页面的时候，就需要像服务器发送很多次访问请求，这样一来，一是造成资源浪费，二是会导致访问速度变慢。这时候，把很多小图片（需要使用的小图标）放在一张图片上，按照一定的...
这块前端代码input::-webkit-input-placeholder { color: red; }用jquery怎么写
06-03
你可以使用以下代码用 jQuery 实现同样的效果： ...$("input::-webkit-input-placeholder").css("color", "red"); ``` 这将选中所有 input 元素的 WebKit 浏览器专用的 placeholder 文本，并将其颜色设置为红色。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值