CSS精灵图

一、CSS 精灵

概述:

CSS精灵英文叫法 CSS sprites,通常被解释为“CSS 图像拼合” 或 “CSS 贴图定位”,其实就是把网页中一些背景图片整合到一张图片文件中,再利用 CSS “background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position 精确的定位出背景图片的位置。

1、 精灵图的原理

1. 实现步骤

  1. 通常要限定容器大小

  2. 图片拼合

  3. 背景定位

2. 优缺点

优点

  • 减少网页的 http 请求,从而大大的提高页面的性能

  • 图片命名上的困扰

  • 更换风格方便

缺点

  • 必须要限定容器大小符合背景图元素位置

  • 需要计算位置。

3. 应用场景

适用于一般小图片(如小图标,小背景),不适合大背景大布局背景。

二、滑动门

概述:

为了使特殊形状的背景使能够自由拉伸滑动,以适应元素内部的文本内容,出现了CSS滑动门技术。 最常见于各种导航栏的滑动门

实现要点

  • 特殊背景拼合

  • 内容自适应

    • 浮动

    • 行内块

三、CSS显示隐藏

display:

  • none;隐藏该元素并且该元素所占的空间也不存在了。

  • block; 显示元素

visibility:

  • hidden;隐藏该元素但是该元素所占的内存空间还存在,即“隐身效果”。

  • visible; 显示元素

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值