文档章节

CSS的背景图的sprite

筱飞
 筱飞
发布于 2016/04/08 15:53
字数 336
阅读 30
收藏 1

示例1。首先我们先看一张多个图片拼接成的合成图,我们要取其中的一个图标

我们取这个第二个图标

<html>
<meta http-equiv="Content-Type" content="text/html"; charset="UTF-8"/>
<style>
.sk_background_1{
height: 46px;
width: 41px;
//background url(xx.jpg) left top;
background : url(img/css-sprites-01.gif) 231px -60px ;
}
</style>
<div class="sk_img">
<div class="sk_background_1">这里有张图片</div>
</div>
</html>

关键代码也就是

height: 46px;
width: 41px;
//高度和宽度是显示图片的大小。url后面的2个坐标,第一个是距离浏览器的左边据,第二个是距离浏览器的上边距,如果左边,上边有其他标签。这个坐标就是以最近的标签为0开始计算
background : url(img/css-sprites-01.gif) 231px -60px ;


示例2,显示3个按钮,按纽可以点击。

<html>
<meta http-equiv="Content-Type" content="text/html"; charset="UTF-8"/>
<script>
</script>
 
<style>
.sk_img ul li{
margin: 0;
padding: 0;
list-style: none;
top: o;
}
.sk_img_button1{
width: 84px;
height: 85px;
background : url(img/css-sprites-02.jpg) -208px 97px;
}
.sk_img_button2{
width: 84px;
height: 85px;
background : url(img/css-sprites-02.jpg) 294px -30px;
}
.sk_img_button3{
width: 84px;
height: 85px;
background : url(img/css-sprites-02.jpg) 205px -31px ;
}
</style>
 
<div class="sk_img">
<ul>
<a href="window.history.back(-1);"><li class="sk_img_button1"></li></a>
<a href="https://www.baidu.com"><li class="sk_img_button2"></li></a>
<a href="https://www.163.com"><li class="sk_img_button3"></li></a>
</ul>
</div>
</html>

点击按纽则跳转,点击第一个返回上一个页面,点击第二个调转到baidu等。

© 著作权归作者所有

筱飞
粉丝 15
博文 142
码字总数 22847
作品 0
虹口
前端工程师
私信 提问
CSS编译工具--Peaches

Peaches是一个基于Node的CSS编译工具,用于自动合成CSS Sprite。 Peaches 追求简单、自然的CSS书写方式! 大致的工作原理如下: 1. 我们在书写样式时,对每个需要使用背景图片的元素,进行单...

sliuqin
2013/04/12
534
0
compass精灵图

css雪碧图又叫css精灵或css sprite,是一种背景图片的拼合技术。使用css雪碧图,能够减少页面的请求数、降低图片占用的字节,以此来达到提升页面访问速度的目的。但是它也有令人诟病的地方,...

Billydotzhang
2016/11/17
12
0
Google LOGO的CSS Sprite

css-sprite 为纪念美国现代舞舞蹈家玛莎·葛兰姆诞辰,Google Doodle推出了一款极其炫酷的LOGO,整个LOGO使用CSS Sprite技术,利用一个初始图片和一张画满各个动作的拼接图片,实现了动画,而...

bestvist
2017/11/11
0
0
CSS——CSS 给盒子、背景、链接、列表、表单、表格等加样式

前言: 通过前 8 篇文章基础知识的铺垫,我们也算是见识了 CSS 的“神通广大”。 这篇文章,我们就把实际工作中最高频用到的“CSS 加样式”挨个列一列,用一行行代码来展示 CSS 是如何给“盒...

OliZhao
04/26
0
0
Css Sprite(雪碧图、精灵图)

一、精灵图使用场景: 二、Css Sprite(优点) 减少图片的字节。 减少网页的http请求,从而大大的提高页面的性能。 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了...

dawdler~Bo
2018/07/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
1K
12
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
24
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
20
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
33
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部