3

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

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

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

http://www.slidesjs.com/

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

编辑：删除第二张图片。

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

自动将徽章放置在图像的一角。

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

4

3 回答 3

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/

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

于 2011-07-30T19:14:22.457 回答
0

一种简单的方法是将横幅作为图像放在 a 中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/

于 2011-07-30T19:14:43.657 回答
0

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

希望有帮助。

于 2011-07-30T21:04:35.150 回答