当前位置：文江博客话题详情

CSS 精灵导航和禁用图像的用户

发布于 2024-08-07 00:13:03 字数 704 浏览 1 评论 0原文

我用 css sprites 制作了一个 css 菜单，但问题是 sprite 我们不使用内联图像，我们仅在后台使用，因此如果在浏览器中禁用图像，则不会显示任何内容。有什么解决办法吗？

例如：

查看此菜单并关闭图像： http ://line25.com/wp-content/uploads/2009/css-menu/demo/demo.html（如果在浏览器中禁用图像，则不会看到）

此菜单与此引用相反

确保您的网站可以使用图像已禁用
创建一个过于依赖图像的网站从来都不是一件好事
想法。虽然几乎是一件事情过去，仍然有用户在运行网速非常低。另外，如果一个用户需要——无论什么原因——禁用图像，它们还能吗访问他们需要的所有内容？

http://csswizardry.com/quick-tips/#tip-02

应该我们不使用这种类型的导航吗？

原文

I made a css menu with css sprites but the problem is with sprite we don't use inline image we use in background only so if images are disabled in browser then nothing will show . any solution for this ?

For example :

See this menu and turn off images : http://line25.com/wp-content/uploads/2009/css-menu/demo/demo.html (it will not be seen if images are disabled in browser)

this menu is against on this quote

Ensure your website works with images
disabled
Creating a site that relies too heavily on images is never a good
idea. Although almost a thing of the
past, there are still users who run at
very low internet speeds. Also, if a
user needs to—for whatever
reason—disable images, can they still
access all the content they need to?

http://csswizardry.com/quick-tips/#tip-02

Shouldn't we use this type of navigation.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

后知后觉 2024-08-14 00:13:03

不要将精灵用于内容图像。它们依赖于表示层 (CSS) 中的背景图像。将您的内容放入内容层（HTML）中。

回复收藏 0 原文

俏︾媚 2024-08-14 00:13:03

您可以创建一个 1x1 透明像素图像并将其放入具有精灵的 div 中。
例如：

<style type="text/css">
#linkContainer {background:url(images/sprite.gif) 0 50 no-repeat}
//sprite selection width/height, set cursor to pointer so users know its a link
#linkContainer img {width:50px;height:25px;cursor:pointer}  
<style>
<div id="buttonContainer"><img src="pixel.gif" alt="Your alt text"></div>

You can create a 1x1 transparent pixel image and put it within the div that has the sprite.
For example:

<style type="text/css">
#linkContainer {background:url(images/sprite.gif) 0 50 no-repeat}
//sprite selection width/height, set cursor to pointer so users know its a link
#linkContainer img {width:50px;height:25px;cursor:pointer}  
<style>
<div id="buttonContainer"><img src="pixel.gif" alt="Your alt text"></div>

回复收藏 0 原文