使用 CSS sprites 设置按钮背景图像、按钮图标图像和文本的样式
我正在尝试优雅地解决一些按钮和图像的样式问题。我的目标是拥有如下所示的按钮：
（Hacky mspaint 模型）
（来源：robhruska.com）
但是，我有一组我想满足的标准：
- 我还需要能够让图标图像单独作为按钮存在，没有文本（即按钮背景是图标图像，按钮宽度/高度=图标图像宽度/高度）。
- 仅图标按钮需要支持更改背景图标的
:hover状态。 - 文本按钮需要支持
:hover上的渐变背景更改，但图标本身不必更改。
我在垂直 CSS 精灵图像中同时提供了图标图像和渐变图像。
目前，我只能考虑使用文本按钮和仅图标按钮的单独样式集来实现此目的，大致如下：
<!-- text-button -->
<!-- button.text-button would have gradient background and border -->
<!-- button.text-button:hover would change to the hover gradient -->
<!-- .icon would have the icon background (icon border is included in image) -->
<button class="text-button">
<div class="icon-delete">Button Text</div>
</button>
<!-- icon-only button -->
<!-- button.icon-button would have the specific icon image background -->
<!-- button.icon-button:hover would change to the hover state background -->
<!-- button styling is different than .text-button, since icon border is included in image -->
<button class="icon-button-delete"></button>
我不太喜欢使用内部
总结我的问题：如何在
我真的不需要完整的代码示例，只是关于如何最好地完成它的建议。
I'm trying to elegantly solve a styling issue with some buttons and images. My goal is to have buttons that look like the following:
(Hacky mspaint mockup)
(source: robhruska.com)
However, I have a set of criteria I'd like to meet:
- I also need to be able to have the icon image exist as a button alone, with no text (i.e. the button background is the icon image and the button width/height = icon image width/height).
- The icon-only button needs to support
:hoverstates that change the background icon. - The text buttons need to support the gradient background changing on
:hover, but the icon itself does not have to change.
I have both the icon image and gradient image available to me in a vertical CSS sprite image.
Currently, I can only think to do this with separate sets of styles for the text buttons and icon-only buttons, along the lines of:
<!-- text-button -->
<!-- button.text-button would have gradient background and border -->
<!-- button.text-button:hover would change to the hover gradient -->
<!-- .icon would have the icon background (icon border is included in image) -->
<button class="text-button">
<div class="icon-delete">Button Text</div>
</button>
<!-- icon-only button -->
<!-- button.icon-button would have the specific icon image background -->
<!-- button.icon-button:hover would change to the hover state background -->
<!-- button styling is different than .text-button, since icon border is included in image -->
<button class="icon-button-delete"></button>
I don't particularly like using the inner <div> for the text button, since it seems to add more markup that might be unnecessary. It also makes it so that if I wanted to go back later and add text to a button, I'd have to change several components instead of just changing the button class. It also means that I probably have to define the image positions for my icon sprites for several different combinations of button/div styles, which isn't DRY.
To summarize my question: How can I do this with a single top-level style on the <button>, rather than using nested elements or separate styles for the icon- vs text- buttons? It doesn't necessarily have to be a <button> either, it could be any element if it accomplishes this elegantly.
I don't really need a full code sample, just a suggestion for how it might be accomplished best.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
您可以稍微减少标记：
.button 获取渐变图像。
如果需要，.yourIcon 可以获取背景图标。
You can reduce the markup a bit:
.button gets the gradient image.
.yourIcon can then get an icon for a background if desired.
就我个人而言，我只是使用带有透明 gif 和 CSS 背景图像的
![]()
我在这里构建了一个粗略的演示： http://jsfiddle.net/TTyPZ/3/
版本2：http://jsfiddle.net/z9pD9/1/
Personally, I'd just use an
<img>with a transparent gif and a CSS background-image instead of your icon div. And a span for the text. For the text-free version of the button, just leave out the span and adjust the button class.I've built a crude demonstration here: http://jsfiddle.net/TTyPZ/3/
Version 2: http://jsfiddle.net/z9pD9/1/
您可以最大程度地简化它：只需使用渐变作为背景，然后插入另一个以图标作为背景的标签，使用 css 垂直对齐属性（它接受 % 值）将图标与文本正确对齐。
不要使用 div 标签，请考虑使用
标签，这样可以节省一些字节，顺便说一下，这是 google 技术。希望这有帮助
You could use simplify it at max: just use gradient as background and insert insert another tag with icon as background inside, use css vertical-align property (it accepts % values) to place the icon properly aligned to text.
instead of using div tags consider using
<b>tag, ir saves ytou some bytes and it is s google technique by the way.hope this helps
您可以创建 2 个单独的按钮元素并使用绝对定位将图标按钮放在大按钮之上吗？
Can you just create 2 separate button elements and use absolute positioning to get the icon button on top of the big button?