认识CSS中精灵技术(sprite)和滑动门
前端之HTML,CSS(十)
精灵技术与精灵图
精灵技术本质
精灵技术是一种处理网页背景图像的方式,实质是将小的背景图片拼接到一张大的背景图像上。拼接成的大图被称为精灵图。浏览器打开网页时,每一个图片显示都是浏览器向服务器发送一次请求的结果,精灵技术是把多个小图片拼接为一个大图,有效减少了浏览器请求服务器的次数,与此同时也提高了页面的加载速度。
精灵技术使用
精灵技术实际是通过background属性限定盒子大小以后,通过background-position属性调整背景图片的位置,使得一个大图上的小图片局部显示出来,未显示的部分由于盒子大小有限,且作为盒子的背景图片,不会显示在页面上。
测试用图片为王者荣耀下载游戏保存的图片,操作方式鼠标右击选线open in new tab,打开新页面后右键图片另存为...得到图片。
精灵图
精灵技术使用代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>王者荣耀</title>
<style type="text/css">
.sprite-1 {
background: url(images/index.png) no-repeat -0px -182px;
width: 29px;
height: 27px;
}
.sprite-2 {
background: url(images/index.png) no-repeat 0px -350px;
width: 236px;
height: 106px;
}
</style>
</head>
<body>
<div class="sprite-1"> </div>
<div class="sprite-2"> </div>
</body>
</html>
效果
滑动门
滑动门是利用精灵技术设定等高盒子,两个盒子设定同样的背景图片,再由盒子的内容撑开盒子实现了盒子根据内容大小的自适应。
背景用图
测试代码,自行改变代码中内容的,观察盒子横向伸缩。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滑动门-测试</title>
<style type="text/css">
a {
display: inline-block;
height: 33px;
line-height: 33px; /*内容居中对齐*/
background: url(images/wx.png) no-repeat; /*设置左盒子背景靠左显示*/
padding-left: 15px;
}
span {
display: inline-block;
height: 33px;
text-decoration: none;
color: #fff;
background: url(images/wx.png) no-repeat right; /*设置右盒子背景靠右显示*/
padding-right: 15px;
}
</style>
</head>
<body>
<a href="#">
<span>改变字数试试</span>
</a>
</body>
</html>
认识CSS中精灵技术(sprite)和滑动门的更多相关文章
- HTML+CSS技术实现网页滑动门效果
一.什么是滑动门 大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门. 小米官网,网页滑动门效果 二.实 ...
- css:background-position > 精灵技术
background-position : length || length background-position : position || position 取值: length : 百分数 ...
- css+html应用实例1:滑动门技术的简单实现
关于滑动门,现在的页面中好多地方都会用到滑动门,一般用作于导航背景,它的官方解释如下: 滑动门:根据文本自适应大小,根据背景的层叠性制作,并允许他们在彼此之上进行滑动,以创造出一些特殊的效果. 为什么 ...
- css sprites精灵技术:Html将所有图片放在一张图片上
使用最近做的某项目常见页面作为联系素材: 分析:1.切图:步骤条可以切成四种图,即黄灰.红黄.红.灰. 2.html:需要五个li标签,每个包含一个图片及文字. 将要取得图片放到同一张图片上,从左到右 ...
- CSS的精灵技术
- CSS滑动门
如下图所示,每个导航栏目的文字个数不一样多,有的长,有的短,如何用一张背景图片,适应不同字数”的导航条,“滑动门”设计的非常巧妙,采用两个相同的背景图像,一左一右,一个负责提供左边框,一个负责提供右边 ...
- JS滑动门,JQuery滑动门
<a href="#" id="one1" onmouseover="setTab('one',1,2)" class="h ...
- CSS 精灵技术(sprite)
一.精灵技术产生的背景 图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户. 然而,一个网页中往往会应用很多小的背景图像作为修饰,当 ...
- CSS之 元素显示隐藏,用户界面样式,文本溢出隐藏,精灵技术,三角形
元素的显示与隐藏 display 显示 display 设置或检索对象是否及如何显示 display: none; 隐藏对象 display: block; 除了转换为块级元素, 同时还有显示元素的意 ...
随机推荐
- 13 Calculating Expected Offspring
Problem For a random variable XX taking integer values between 1 and nn, the expected value of XX is ...
- C# Redis Server分布式缓存编程(一)(转)
出处:http://www.cnblogs.com/davidgu/p/3262571.html 这篇文章我将介绍如果用最简洁的方式配置Redis Server, 以及如何使用C#和它交互编程 一. ...
- 解决windows搭建jenkins执行selenium无法启动浏览器问题
因为jenkins是用windows installer 安装成windows的服务了,那么jenkins是一个后台服务,所以跑selium cases 的时候不显示浏览器 Step 1. Contr ...
- BPNN
链接网址:http://blog.csdn.net/heyongluoyao8/article/details/48213345 BPNN 人工神经网络 我们知道,人的脑袋具有很强的学习.记忆.联 ...
- 程序员不常用Linux命令集
1) 关闭指定网卡,如关闭网卡eth0 ifconfig eth0 down 也可以使用ifdown,通常ifdown是一个指向ifup的软链接,而ifup为一个脚本文件. 2) 命令自启动,如希望机 ...
- HDU 5974 A Simple Math Problem(数论+结论)
Problem Description Given two positive integers a and b,find suitable X and Y to meet the conditions ...
- Zend_Controller_Front 研究
如果你裸写php,一个项目就会出现很多的页面控制器(Page Controller),如果项目很大,重复代码就很多,越来越变得很难维护.有了问题,自然就有解决方案!于是前端设计模式 闪亮登场! 前端 ...
- 机器学习—K近邻
一.算法原理 还是图片格式~ 二.sklearn实现 import pandas as pd import numpy as np import matplotlib.pyplot as plt im ...
- java中的软引用,弱引用,虚引用
http://zh.wikipedia.org/wiki/%E5%BC%B1%E5%BC%95%E7%94%A8 有些语言包含多种强度的弱引用.例如Java,在java.lang.ref[1]包中定义 ...
- testNG的高级用法 --DataProvider
@DataProvider Method参数 数据提供者的第一个参数是java.lang.reflect.Method,TestNG传递这个将调用的测试方法.如果您希望数据提供者根据不同的测试方法返回 ...