CSS Sprites - 不仅适用于背景图片？

对于“前景”图像是否可以使用CSS精灵 - 即用户应该点击并与之交互甚至打印的图像？CSS Sprites - 不仅适用于背景图片？

而不是使用CSS background-image财产。你会用什么？

来源

2010-03-11 Summer

您可以使用标准<img />标签，并将其放置在高度/宽度有限的容器（如<div />）中。然后使用相对定位或负边距来控制图像的位置。

来源

2010-03-11 19:37:30

天才，谢谢！ – Summer 2010-03-11 19:42:11

这是矫枉过正的IMO，你可以设置输入来显示块，并将div/wrapper全部从等式中移除，这是一种更简单的方法。 – 2010-03-11 19:42:25

@Nick这没有任何意义。如何在不使用容器的情况下应用精灵？ – 2010-03-11 19:45:47

-1

你可以这样做，但你必须使用背景图片为精灵，你必须要能够设置位置。这可以用于链接或任何你想要的。看看谷歌精灵，他们用它有按钮在iGoogle上：http://img0.gmodules.com/ig/images/v2/sprite0_classic.gif

来源

2010-03-11 19:39:12

-1您可以使用CSS中的'position'结合'top，left，right，bottom'来控制任何元素的位置。或者，您可以使用负边距。 – 2010-03-11 19:40:22

我从来没有说过你可以控制任何元素的位置。但是，您可以使其与任何元素上的背景图像一起工作。 – 2010-03-11 19:44:37

当然，你可以，但他们特别要求如何做*没有*背景图像！ – 2010-03-11 19:48:10

你可以用这样少的CSS做到这一点：

.myClass { background: url(../Images/Sprite.png) no-repeat; 
      height: 20px; 
      width: 40px; 
      background-position: -40px 0; 
      display: block; } 
.myClass:hover { background-position: -40px -20px; }

不管有类class="myClass"将刚才的形象吧，没什么其他。这可以是一个<a>的<input>还是正常<div>，任何你想要的。

这是一个背景图片...但它是你在看，没有什么是在背景前的元素。仅仅因为你使用background-image作为属性并不意味着它不是前景元素......就像你点击一个按钮。你可以这样做：

<input type="button" class="myClass" />

来源

2010-03-11 19:58:25

这是基于背景图像的解决方案，无论您如何旋转此图像。这个问题明确要求别的东西。我有点理解为什么 - 作为文档内容的一部分的图像和属于其布局和风格的图像之间存在明显的*基本*区别。 – amn 2017-05-05 17:40:35

背景图片无法处理的一个主要要求是ARIA。 ARIA的所有要求都将拒绝使用背景图像进行有意义的导航和其他“信息性”用途，屏幕阅读器必须代表残疾用户解释这些用途。在当前规范的开发环境中，能够替换img标签的背景图像css语句和必要的某些ARIA标签是一个关键特性。

答案原来的问题是是！可以使用在css背景语句中显示的图像。但是，您必须在图像编辑器中打开精灵图像，并选择代表所需精灵的部分并将其另存为独立图像并将其引用到img标记中。

的挑战是，通常情况下，这些情况在预建控件库出现。查找和更改库中用于选择和显示背景图像的代码有点困难，因为更改代码非常困难！

来源

2017-05-05 17:33:28

CSS Sprites - 不仅适用于背景图片？

回答

相关问题