角落上的图像徽章/标签。什么库（jQuery？）最好？答案

【问题标题】：Image Badges/Labels on the corner. What library (jQuery?) would be best?角落上的图像徽章/标签。什么库（jQuery？）最好？
【发布时间】：2011-10-16 15:45:07
【问题描述】：

我一直在试图弄清楚它们的确切名称，以及您可以使用哪些库来实现它们。或者也许有一个我没见过的直接 CSS 解决方案？

基本上我想在我的一些图像的角落添加一个标签。我希望它看起来像一条彩带，上面写着“新”或“免费”。但我似乎不太明白这些丝带叫什么。这是一个示例（注意：标签位于右上角）。

编辑：我是新用户，所以无法发布图片。瘸。但我了解其背后的反垃圾邮件前提。 相反，这里有一个示例幻灯片的链接，该幻灯片的角落有一个“新”标签：

http://www.slidesjs.com/

谷歌搜索出现了“徽章”，但它们看起来更像 iPhone 徽章，这不是我想要的。这就是它们的样子。请注意下面两个文本部分右上角的红色标记。

编辑：删除第二张图片。

我在搜索时也打开了这个链接，但是示例中使用的徽章很难看。

Position badge over corner of image automatically.

所以我想知道是否必须创建自己的，或者是否有插件或预制解决方案。提前致谢！

【问题讨论】：

这里是 iPhone 风格徽章的链接。 blogupstairs.com/badger-ios-style-badges-jquery-plugin

标签： jquery html css image badge

【解决方案1】：

简单的 CSS。

创建带有横幅图形的元素，将其放在 HTML 代码的根部（即在 <body> 标记内，但不在其他任何内容内），然后按如下方式设置样式：

.banner {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
}

解释：

position:fixed - 设置它使其位置固定在浏览器窗口中。您可以滚动页面的其余部分，并且横幅不会移动。（如果您希望它与页面的其余部分一起移动，请将其更改为 position:absolute;）

top:0 和right:0 - 做他们应该做的事，并将横幅放置在页面的右上角。如果您愿意，请随意使用bottom 和left。如果您想稍微缩进，请将其设置为 right:5px;（注意像素为 px）。

z-index:1000 - 这可以是任何值，甚至可以完全省略，具体取决于页面其余部分的布局方式。这样做的目的是确保横幅显示在您可能放置在页面上的任何其他内容之前。

希望对您有所帮助。

【讨论】：

谢谢 Spudley，您对 CSS 的解释很有帮助，帮助我更全面地理解其他答案。谢谢！

【解决方案2】：

您不需要 Javascript。你可以用好的旧CSS来做到这一点。类似于

#badge{
    position: absolute;
    top: 0p;
    left: 0px;
}

如果您希望它出现在不同的角落，您可以从上到下，从左到右进行更改。您只需将您的徽章放在与您的图片相同的 div 中，例如：

<div>
    <img id="badge" src="..." />
    <img src="..." />
</div>

哦，容器 div 还需要 position: relative; 才能使其内部的 position: absolute 工作。这是一个 jsfiddle 的链接，它使用了您也链接我的幻灯片中的图像：

http://jsfiddle.net/ky2Ac/

它看起来有点不同，因为在他们的图像周围添加了一个白色边框，但这很容易做到。重点是徽章 :) 现在你只需要找到一张具有透明背景的好图片来用作徽章（我也不知道还能叫什么）。

【讨论】：

谢谢！在我阅读了您的答案后，我突然想到您必须使用 Firebug 之类的东西来检查幻灯片……这是我可以（应该）做的事情。但是出于某种我从未想过的原因！我有一个手掌到额头的时刻。 :D
对于其他人来说，这是一个工作示例：jsfiddle.net/jshado1/G5pMZ

【解决方案3】：

一个简单的方法是将横幅作为图像放在div 中，然后将图片作为background-image 中的div。

HTML

<div>
    <img src="http://assets.visrez.com/sites/gibsonhotel/Includes/images/corner_banner.png" />
</div>

CSS

div{background:url(http://www.health-for-dogs.com/wp-content/uploads/2011/05/old-dog-150x150.jpg) no-repeat;}

http://jsfiddle.net/jasongennaro/25cFh/1/

【讨论】：

感谢示例代码！因此，在您的示例中，您是否制作或找到了那条丝带？另外，是否可以修改 css 以偏移色带，使边缘越过图片的边缘？丝带看起来像是要挂在边缘上。我的 CSS 很弱，所以这些回复真的很有帮助！
@Tyler。我刚刚通过搜索找到了功能区和图像并用于示例。您可以设计自己的丝带，使其比图像大，并将其挂在边缘。仅供参考，它需要透明才能在此示例中工作，因此是 .png 或 .gif。
好的，谢谢。如果我理解正确，如果徽章悬挂在边缘 5px 上，您只需要偏移背景图像，使其向下 5px 和向右 5px（对于左上角徽章），对吗？如果正确就不用回复了。只是检查以确保我理解正确。谢谢！