| |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
-> CSS教程 -> CSS 图像拼合技术 -> 正文阅读 |
|
[CSS教程]CSS 图像拼合技术 |
CSS 图像拼合技术图像拼合图像拼合就是单个图像的集合。 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。 使用图像拼合会降低服务器的请求数量,并节省带宽。 图像拼合 - 简单实例与其使用三个独立的图像,不如我们使用这种单个图像("img_navsprites.gif"): 有了CSS,我们可以只显示我们需要的图像的一部分。 在下面的例子CSS指定显示 "img_navsprites.gif" 的图像的一部分: 实例解析:
这是使用图像拼合最简单的方法,现在我们使用链接和悬停效果。 图像拼合 - 创建一个导航列表我们想使用拼合图像 ("img_navsprites.gif"),以创建一个导航列表。 我们将使用一个HTML列表,因为它可以链接,同时还支持背景图像: 实例
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} #navlist li, #navlist a{height:44px;display:block;} #home{left:0px;width:46px;} #home{background:url('img_navsprites.gif') 0 0;} #prev{left:63px;width:43px;} #prev{background:url('img_navsprites.gif') -47px 0;} #next{left:129px;width:43px;} #next{background:url('img_navsprites.gif') -91px 0;} 尝试一下 ? 实例解析:
现在开始每个具体部分的定位和样式:
图像拼合s - 悬停效果现在,我们希望我们的导航列表中添加一个悬停效果。
我们的新图像 ("img_navsprites_hover.gif") 包含三个导航图像和三幅图像: 因为这是一个单一的图像,而不是6个单独的图像文件,当用户停留在图像上不会有延迟加载。 我们添加悬停效果只添加三行代码: 实例
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;} #next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;} 尝试一下 ? 实例解析:
|
|
CSS教程 最新文章 |
响应式 Web 设计 – 框架 |
响应式 Web 设计 – 视频(Video) |
响应式 Web 设计 – 图片 |
响应式 Web 设计 – 媒体查询 |
响应式 Web 设计 – 网格视图 |
响应式 Web 设计 – Viewport |
CSS 伪元素 |
响应式 Web 设计 – 图片 |
CSS Id 和 Class选择器 |
CSS3 圆角 |
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 | -2024/11/22 18:35:31- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |