问题标签 [css-sprites]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - 使用 css sprite 的垂直导航菜单中的问题
我正在尝试使用 CSS 精灵创建垂直导航菜单。我想在其中添加一个悬停效果，菜单选项会滑出一点。
所以我对 a:link 和 a:hover 使用相同的精灵图像。我只是在 a:hover 的情况下增加宽度以创建弹出效果。
考虑这个类比。如果我的标签都在 x=0 处对齐，这是我目前的情况。
这是我完整的css代码：
有人可以帮我吗？
谢谢
css - CSS中的背景位置
我们可以使用 2 张以上的图像进行单次导航吗？这意味着当我们将鼠标悬停在该图像上时，它将显示 6 个不同的图像。是否可以制作单个导航图像？如果可能意味着如何？
我想你们都明白这一点
html - 禁用按钮上的图像
我有一个与按钮部分重叠的透明 PNG。按钮在图像重叠处变为非活动状态。有没有办法将透明度“关闭”，以便在其后面可以点击按钮？或者有没有其他技巧可以解决这个问题？
asp.net - IE7\8 与 Sprites On 输入不兼容？
我正在使用 css sprite 技术将网站上的所有按钮保存在一个 PNG 图像中。
这种技术在您的普通样式按钮上的所有浏览器上都可以正常工作，但是对于 IE 7/8，它会在我使用 css 类定义图像的任何输入上显示边框和红色 x。这种技术适用于 Firefox。
我在这里错过了什么吗？
HTML：
http://img85.imageshack.us/img85/7493/spriteerrorhtml.png
CSS：
http://img514.imageshack.us/img514/1382/spriteerrorcss.png
比较：
http://img99.imageshack.us/img99/3251/spriteerrorcomparison.png
css - 将图标与文本对齐
对齐图标（左）和文本（右）或左边的相反文本和右边的图标的最佳方法是什么？
图标图像和文本是否必须相同大小？理想情况下，我希望它们不同但垂直对齐。
我正在使用 background-position css 属性从更大的图像中获取图标。
这是我现在的做法，但我正在努力让它们在同一条线上或垂直对齐到底部。
文本
这是我尝试您的建议后得到的。
虽然文本现在与图标对齐，但它叠加在我想要的图标右侧的图标上。请注意，我正在使用背景位置来显示更大图像集中的图标。
基本上我得到
css - 使用 CSS sprites 为按钮背景图像、按钮图标图像和文本设置样式
我正在尝试用一些按钮和图像优雅地解决样式问题。我的目标是拥有如下所示的按钮：
（Hacky mspaint 样机）
（来源：robhruska.com）
但是，我有一组我想满足的标准：
- 我还需要能够让图标图像单独作为按钮存在，没有文本（即按钮背景是图标图像，按钮宽度/高度 = 图标图像宽度/高度）。
- 仅图标按钮需要支持
:hover更改背景图标的状态。 - 文字按钮需要支持渐变背景的变化
:hover，但图标本身不需要变化。
我在垂直 CSS 精灵图像中同时拥有图标图像和渐变图像。
目前，我只能考虑为文本按钮和纯图标按钮使用单独的样式集，如下所示：
我不是特别喜欢使用内部<div>文本按钮，因为它似乎添加了更多可能不必要的标记。这也使得如果我想稍后返回并向按钮添加文本，我必须更改几个组件，而不仅仅是更改按钮类。这也意味着我可能必须为按钮/div 样式的几种不同组合定义图标精灵的图像位置，这不是 DRY。
总结一下我的问题：如何使用 上的单个顶级样式来做到这一点<button>，而不是使用嵌套元素或图标-与文本-按钮的单独样式？它不一定必须是一个<button>，它可以是任何元素，如果它优雅地完成了这一点。
我真的不需要完整的代码示例，只是建议如何最好地完成它。
css - 将图标与文本对齐
以前也问过这个问题，但是解决不了，所以再问。
我正在尝试将垂直精灵中的图标（左侧）与文本（右侧）对齐。无论图标和文本的大小如何，我都希望文本和图标底部对齐，即文本可以是 h1 也可以是 h5。图标大小在 25 像素时基本保持不变。
我目前正在使用以下CSS。
但是我无法让图标与右侧的文本对齐，而不会弄乱图标的背景位置。理想情况下，我宁愿不这样做，而只在 css 类上使用相同的图标，而不管它旁边的文本大小如何。
css - -webkit-border-image 与 css 精灵
我-webkit-border-image用来在样式中指定我的主要精灵图像。精灵图像是一堆按钮图像。我使用什么样式属性来索引我的主要精灵图像？
红色按钮精灵位于 x=0, y=21。
我使用什么属性？如果是背景，我会使用background-position. 我不确定该用于什么-webkit-border-image。
css - CSS sprites 和 highlighting - 可以一次将“悬停”属性应用于多个项目？
我有两个精灵图像。一个图像包含圆形按钮的主体以及其他状态（悬停、单击等），而另一个包含图像最左侧的曲线。
我正在使用这些，因此我的网页上不必有多个按钮图像，这些按钮可以缩放到任何大小。
和 CSS
当我将鼠标悬停在包含 , （图标的大部分）的 div 部分上时，我的精灵的两个部分都应用了“悬停”样式。但是，如果我将鼠标悬停在“”之前的图像部分上，我只会看到图像的一部分应用了“悬停”样式。
我想做的是在父 div 应用了悬停样式时激活跨度的“悬停”样式。
有什么建议吗？
谢谢