使用 CSS Sprites 时呈现边框

发布于 2024-10-16 05:19:34 字数 658 浏览 5 评论 0原文

我正在尝试使用 CSS 精灵来减少页面上的 HTTP 请求数量。我希望这些图像能够无边框渲染。

据我所知，我已经正确配置了 CSS，但我遇到了以下渲染问题（注意：Google 徽标被故意剪切）：

如您所见，所有浏览器仍然呈现边框。此外，IE 和 FireFox 也会呈现“损坏的链接”类型图标。

本例中使用的 HTML 是：

<html>
  <head>
    <style>
      img {border:none}
      img.css_sprite { background:url("http://www.google.com/images/nav_logo29.png") -20px -10px; height:24px;  width:100px; border:none;}
    </style>
  </head>
  <body>
    <img class="css_sprite"/>
  </body>
</html>

谁能告诉我我在这里做错了什么？我确信这一定是简单的事情。提前致谢。

原文

I'm trying to use CSS sprites to reduce the number of HTTP requests on page. I want the these images to render without borders.

As best I can tell I have configured the CSS correctly, yet I am experiencing the render issues below (note: The Google logo is intentionally clipped):

As you can see, all the browsers still render a border. Also, IE and FireFox render 'broken link' type icons as well.

The HTML used in this example is:

<html>
  <head>
    <style>
      img {border:none}
      img.css_sprite { background:url("http://www.google.com/images/nav_logo29.png") -20px -10px; height:24px;  width:100px; border:none;}
    </style>
  </head>
  <body>
    <img class="css_sprite"/>
  </body>
</html>

Can anyone tell me what I'm doing wrong here? I'm sure it must be something simple. Thanks in advance.

分享到QQ

分享到微博

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

发布评论

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

黯淡〆 2024-10-23 05:19:34

边框属于这个：

<img class="css_sprite"/>

它是浏览器由于缺少图像而绘制的边框。此处您未指定任何 src，因此浏览器会添加边框和缺失的图像图形。

将 img 更改为其他元素，例如 div 或 span 。

The border belongs to this:

<img class="css_sprite"/>

It's a border drawn by the browsers due to a missing image. Here you don't specify any src so the browsers add the border and missing image graphic instead.

Change the img to some other element instead like div or span instead.

回复收藏 0 原文