css雪碧(代码片段)

author author     2023-01-07     573

关键词:

"view":"split","fontsize":"160","seethrough":"","prefixfree":"1","page":"css"
// alert('Hello world!');
<a href="#" class="btn-login ir">ログインしてはじめる</a>
/* Sprite */
.btn-login 
  display: inline-block;
  width: 528px; /* 使いたい画像のサイズ */
  height: 82px; /* 使いたい画像のサイズ */
  background-image: url(data:image/png;base64,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);
  background-position: 0 0;
  background-repeat: no-repeat;

.btn-login:hover 
  background-position: 0 -82px;


/* Image Replacement */

雪碧图布局(代码片段)

...每种动画类型都需要一个对应的动画图标,这里就使用了雪碧图。一、什么是雪碧图百度百科:CSS雪碧即CSSSprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景... 查看详情

css雪碧图(代码片段)

CSSSprite初探之原理、使用CSSSprite简介:利用CSSSprites能很好地减少了网页的http请求次数,从而大大的提高了页面的性能,节省时间和带宽。CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及... 查看详情

web前端html5&css314-雪碧图与渐变(代码片段)

雪碧图与渐变笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版目录雪碧图与渐变1.雪碧图2.线性渐变3.径向渐变雪碧图与渐变1.雪碧图解决图片闪烁的问题:可以将多个小图片统一保存到一个大图片中,然后通过... 查看详情

多个图标图片(雪碧图)使用css样式显示(代码片段)

现在的网页中显示很多图标算是常态,发现项目中页面上用到的图标都是单个图标单个文件,用的时候直接往页面上挂,这确实很常态。如果,网站是挂在外网上,或者网速过低,又大量使用图标的情况下,由于浏览器和服务器... 查看详情

css雪碧图及jquery定位代码

...么实现的?后来询问得知,这是css精灵技术(sprite)也叫雪碧图。 CSS知识点:background-imagebackgorund-position特点:相对于当个小图标,它节省文件体积和服务请求次数。将所有零碎的网页背景图片 查看详情

web前端练习31----css,选择器(基本选择器,复合选择器,属性选择器,伪类,伪元素,优先级,雪碧图练习)(代码片段)

参考文档:https://man.ilovefishc.com/css3/一、基本选择器:1通配符选择器*2元素选择器element3类选择器.class4id选择器#id5内联样式style二、复合选择器:1交集选择器  element.class||element#id2并集选择器 element1,element2,element3,...3... 查看详情

css雪碧图压缩

 cssgaga下载地址链接:https://pan.baidu.com/s/1Q9xH_XzumIc7vTLCZ3tr5A提取码:stqeCssGaga功能特性合并import的CSS文件,开发阶段将CSS文件按模块拆分复用,发布上线后合并减少HTTP请求;优化、压缩CSS代码,减少带宽占用,加快下载速度;优... 查看详情

雪碧图实现登陆页面(代码片段)

这是素材:这是代码:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"c 查看详情

css图像拼合技术(雪碧图)

1、css图像拼合图像拼合就是单个图像的集合。有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。使用图像拼合会降低服务器的请求数量,并节省带宽。代码如下:<!doctypehtml><html><head><metachar... 查看详情

精灵图(csssprites,css精灵,css雪碧,雪碧图),图片整合技术

精灵图 精灵图(csssprites,css精灵,css雪碧,雪碧图),图片整合技术 原理:将多张单一的图片整合到一张图上,以背景引入,并使用background-position调整背景位置,使之显示不同图片 目的:降低浏览器向服务器的请求次数,提高网页加载速... 查看详情

web前端之背景雪碧图(代码片段)

目录一、背景二、雪碧图一、背景background-color 设置背景颜色background-image 设置背景图片如果背景图片大小小于元素,则背景图片会自动在元素中平铺将元素铺满如果背景图片大小大于元素,则背景图片一部分会无法完... 查看详情

该如何以正确的姿势插入svgsprites?(代码片段)

...——苏南(South·Su),今天要给大家分享的是SVGSprites(也叫雪碧图),所谓雪碧图,当然就不是我们常喝的雪碧饮料(Sprites)哦,哈哈~  当下流程的移动端,手机型号太多太多,今天工作项目中突然发现还有同事在使用以前大家... 查看详情

css雪碧图(csssplite)

将很多小的背景图片放在一起,可以减少http请求.   这些图片通常是一类的。所以使用雪碧图. 雪碧图即为:   测试一下减少了多长时间0=0 查看详情

css雪碧图

...部资源,外部资源都需要浏览器单独发送请求加载, 雪碧图的使用步骤:            1.先确定要使用的图标           &n 查看详情

css中雪碧图(sprite)的使用及制作方法

雪碧图(sprite)是减少请求次数的有效手段,其原理是把多张图片进行合成,使用时通过css进行定位。1.先看一下雪碧图没有使用雪碧图时图标是这样一个个的单独文件:合成雪碧图后是这样拼在一起的一张图: 2.雪碧图的使用... 查看详情

csssprite雪碧图

一、CSSSprite雪碧图使用场景浏览器通常很快就可以将文本显示出来,但图像往往会减慢页面的加载速度。这一现象在移动端尤为明显,为了解决这个问题,可以将多个图像拼合成单个背景图像(sprite),再通过CSS控制具体显示图... 查看详情

css雪碧图-html优化

雪碧图的原理:用同一张图片的不同位置,实现减少http请求的减少<!DOCYTYPEhtml><htmllang="en"><html> <HEAD> <metacharset="utf-8"> <title>test</title> <styletype=&qu 查看详情

雪碧图

雪碧图技术(精灵图)多个图合并后,根据位置出现特定的一张图片,只需加载一次,速度快。前提:组合的每张图宽和高都要一致。出现图片的位置为循环式代码:<styletype="text/css">div{width:150px;height:120px;outline:1pxsolidred;back... 查看详情