微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > html教程 > 正文

CSS控制显示图片的一部分_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 11:56:18
原创
1337人浏览过

使用情形：防止反复请求图片资源，我们经常采用一张图片多种效果或内容显示。 
假设我有纸张竖直方向的一张图片，竖直y轴方向分别是字母：A,B,C.... 
现在分别要显示A、B、C 等字母，我们的CSS可以这么写： 
这里图片一个字母所占的width=20px,height=20px; 
.mar_wordA { 
    background: url("../images/ranking.gif") no-repeat scroll 0 0px transparent; 
} 

.mar_wordB { 
    background: url("../images/ranking.gif") no-repeat scroll 0 -20px transparent; 
} 

.mar_wordC { 
    background: url("../images/ranking.gif") no-repeat scroll 0 -40px transparent; 
} 
........................ 
若果是水平方向的图片，调整x轴的值即可。 
注：需要容器负载图片。

  • CSS控制图片显示.rar (1.2 KB)

    • 大家都在看：

    HTML速学教程(入门课程)
    HTML速学教程(入门课程)

    HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

    下载
    来源：php中文网
    收藏 点赞
    上一篇：CSS的class、id、css文件名的常用命名规则_html/css_WEB-ITnose 下一篇：Codeforces Round #272 (Div. 1)D（字符串DP）_html/css_WEB-ITnose
    本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
    最新问题
    am5charts 地图交互：实现国家点击事件与链接跳转 本教程详细介绍了如何在am5charts地图中为国家多边形添加点击事件监听器，并根据点击的国家数据（如URL）实现页面跳转。文章将涵盖图表初始化、数据绑定、事件监听的设置，以及如何正确从dataContext中获取自定义数据，确保地图交互功能按预期工作。
    2025-11-22 12:04:01
    392
    标题：macOS浏览器中无法样式化HTML Option元素的原因及替代方案 摘要：本文探讨了在macOS系统上的浏览器（Chrome,Firefox,Safari）中无法直接使用CSS样式化HTML元素的原因。由于历史原因，浏览器依赖平台UI组件渲染，这些组件对CSS样式的支持有限。虽然现代浏览器正朝着自渲染控件的方向发展，但平台差异依然存在。本文同时提供了一种使用JavaScript库实现自定义样式的替代方案。
    2025-11-22 12:02:24
    127
    jQuery属性选择器实现轮播图自动播放功能 本文将详细介绍如何利用jQuery的属性选择器，结合setInterval函数，实现一个带有手动导航功能的轮播图的自动播放。核心在于正确地定位并模拟点击带有特定data属性值的“下一页”按钮，从而在用户不操作时也能实现幻灯片的平滑切换。
    2025-11-22 11:58:00
    581
    使用CSS变量与JavaScript实现动态主题切换 本教程详细介绍了如何利用CSS自定义属性（变量）和JavaScript实现网页的动态主题切换功能。文章摒弃了直接操作CSS规则的复杂方法，转而采用在HTML根元素上添加data-theme属性的策略，通过CSS选择器高效地应用不同主题样式。此外，还演示了如何结合localStorage实现用户主题偏好的持久化存储，从而优化用户体验。
    2025-11-22 11:55:02
    308
    深入理解innerText与标签：布局信息对文本渲染的影响 innerText方法在处理包含标签的元素时，需要依赖元素的布局信息来正确计算文本内容。当元素未被添加到文档对象模型（DOM）中时，由于缺乏布局上下文，innerText可能不会将渲染为换行符。而innerHTML始终能正确设置元素的HTML内容。要使innerText正确反映产生的换行，需确保元素已插入到DOM中。
    2025-11-22 11:54:42
    143
    CSS定位：实现子元素溢出滚动父容器的技巧 本教程详细探讨了如何在Web开发中，使一个绝对定位的子元素能够溢出其具有滚动属性的父容器。文章通过分析常见的裁剪问题，并结合具体的HTML、CSS和JavaScript代码示例，演示了如何通过调整父容器的position和overflow属性，以及子元素的定位方式，实现元素在视觉上突破父容器边界的效果，同时提供关键的注意事项和最佳实践。
    2025-11-22 11:54:07
    943
    从HTML blob: URL下载视频：JavaScript实现指南与技术考量 本教程详细阐述了如何使用JavaScript从HTML标签的blob:URL下载视频。文章聚焦于两种主要情况：当blob:URL由URL.createObjectURL生成时，可通过创建虚拟下载链接轻松实现；而对于基于MediaSourceAPI的流媒体视频，则指出其下载的复杂性与挑战，并提供相应的技术考量。
    2025-11-22 11:53:02
    448
    HTML/JavaScript表单验证与数学函数应用：库存管理系统实现指南 本教程详细阐述了如何使用HTML和JavaScript构建一个简单的库存管理表单，实现项目数量求和、50的倍数验证以及库存余额计算。文章深入分析了常见问题，如DOM元素选择器误用、JavaScriptreturn语句执行机制和HTMLID重复，并提供了优化后的代码示例及专业建议，旨在帮助开发者构建健壮的前端验证逻辑。
    2025-11-22 11:52:33
    944
    Node.js中多字段多文件上传与MongoDB路径存储：Multer实践指南 本教程详细讲解如何在Node.js中使用Multer处理HTML表单中的多字段文件上传，并将文件保存到服务器指定目录。核心内容包括Multer配置，Express路由集成，以及如何在控制器中正确获取上传文件信息并将其存储路径而非文件本身的数据存入MongoDB，优化数据库性能和可维护性。
    2025-11-22 11:50:18
    627
    HTML表单action怎么设置_HTML表单提交目标地址action属性用法 HTML表单的action属性指定数据提交的URL，可设为相对路径、绝对路径或留空；需与method配合使用，确保目标地址有效且服务器能处理，是实现用户交互的基础。
    2025-11-22 11:48:49
    284
    相关专题
    更多>
    热门推荐
    开源免费商场系统广告
    热门教程
    更多>
    相关推荐
    热门推荐
    最新课程
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
    php中文网：公益在线php培训，帮助PHP学习者快速成长！
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习

    Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部