CSS-图片整合笔记
注意点:
概念:图片整合技术( css sprite 或 精灵图)。通过将多个图片融合到一张图片,然后通过CSS background 背景定位技术技巧布局网页背景
优势:减少 http iis 请求数,减少对服务器的请求次数,提高页面加载虽度,从而隐形提升网站性能。同时也减少图片文件数目。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
* {margin: 0; padding: 0;}
.question {width: 50px; height: 200px; margin: 0 auto;}
.question li {list-style: none; float: top;}
.question li a {display: block; width: 50px; height: 40px; background: url(img/spriteImg.png); }
#q2 a {background-position: 0 -50px;}
#q3 a {background-position: 0 -100px;}
#q4 a {background-position: 0 -150px;}
#q1 a:hover {background-position: -50px 0;}
#q2 a:hover {background-position: -50px -50px;}
#q3 a:hover {background-position: -50px -100px;}
#q4 a:hover {background-position: -50px -150px;}
</style>
</head>
<body>
<ul class="question">
<li id="q1"><a href="#"></a></li>
<li id="q2"><a href="#"></a></li>
<li id="q3"><a href="#"></a></li>
<li id="q4"><a href="#"></a></li>
</ul>
</body>
</html>
结果:
CSS-图片整合笔记的更多相关文章
- 7:CSS Sprites的原理(图片整合技术)
7:CSS Sprites的原理(图片整合技术) 一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-position”来实现背景图片的定 ...
- CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图
CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图 一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-positio ...
- CSS揭秘读书笔记 (一)
CSS揭秘读书笔记 (一) 一.半透明边框 要想实现半透明边框可以使用border: border: 10px solid hsla(0,0%,100%,.5); background: ...
- 【CSS sprites (CSS图片精灵) 详解】
本文包含 CSS sprites 简介.原理.适用在哪些类型的网页制作中.背景图片的 position 值如何确定以及制作 sprites 的技巧. [CSS sprites 简介] CSS Spri ...
- css的学习笔记
CSS3有哪些新特性? 1. CSS3实现圆角(border-radius),阴影(box-shadow), 2. 对文字加特效(text-shadow.),线性渐变(gradient),旋转(tra ...
- 《CSS揭秘》笔记(一)
前言 我们在现代 CSS 中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器 bug.如今的挑战是,在保证 DRY ① .可维护.灵活性.轻量级并且尽可能符合标准的前提下,把我们手中的这些CSS特性 ...
- css随堂笔记(三)
Css随堂笔记(三) 1 关于背景图片 A 设置背景图片:background-image:url(“图片的路径”): B 背景图片位置: background-position:1 方位名词 ...
- (2)《Head First HTML与CSS》学习笔记---img与基于标准的HTML5
1.浏览器处理图像的过程: 1.服务器获取文件,显示出文本结构,以及预留默认的大小给<img>(如果该<img>有width-1值和height-1值,则根据这个值提前设好页面 ...
- 《CSS世界》笔记二:盒模型四大家族
上一篇:<CSS世界>笔记一:流/元素/尺寸下一篇:<CSS世界>笔记三:内联元素与对齐 写在前面 在读<CSS世界>第四章之前,粗浅的认为盒模型无非是margin ...
随机推荐
- 第一节:Python+Selenium环境搭建
一.selenium工作原理 二.安装python Window系统下,python的安装很简单.访问python.org/download,下载最新版本,安装过程与其他windows软件类似.记得下 ...
- wms证书异常问题
目前我司已定位到两个原因,详细如下, 1. 快速生成的证书存在问题,导致APACHE和NGINX显示的时间都是4号凌晨 2. 贵司在配置完成162和163两台应用的APACHE证书,以及其中10. ...
- 解决support包引起的AndroidStudio编译报错
{"kind":"error","text":"error: resource android:attr/colorError n ...
- jzy3D从入门到弃坑_2使用jzy3D0.9画2D散点图
jzy3D从入门到弃坑_2 使用jzy3D0.9画2D散点图 觉得有用的话,欢迎一起讨论相互学习~Follow Me 在上一节中安装jzy3D 0.9版本并且运行了3D的例子 https://blog ...
- C++内存管理3-探讨C++内存和回收
1 C++内存对象大会战 如果一个人自称为程序高手,却对内存一无所知,那么我可以告诉你,他一定在吹牛. 用C或C++写程序,需要更多地关注内存,这不仅仅是因为内存的分配是否合理直接影响着程序的效率和性 ...
- Python - Django - 中间件 process_response
process_response 函数是执行完 views.py 后执行的函数 process_response 函数有两个参数,一个是 request,一个是 response,response 是 ...
- 分割nginx日志
#!/bin/bash #此脚本用于自动分割Nginx的日志,包括access.log和error.log #每天00:00执行此脚本 将前一天的access.log重命名为access-xxxx-x ...
- SQL2014做数据库主从镜像备份(也可以用于高可用)备忘(非域控)。
部份内容参考原始文章链接:https://www.cnblogs.com/stragon/p/5643754.html ,同时比较有参考价值的文章:https://blog.csdn.net/sqls ...
- 009 SpringCloud 学习笔记5-----Hystrix保护机制
1.概述 Hystrix,英文意思是豪猪,全身是刺,看起来就不好惹,是一种保护机制.Hystrix也是Netflix公司的一款组件.主页:https://github.com/Netflix/Hyst ...
- Java学习笔记——线程
线程: 定义:线程是程序内的一个单一的顺序控制流程,也被称为“轻型进程(lightweight process)” 或“执行上下文(execution context )” 线程用于分隔任务 线程类似 ...