0

抱歉，这太基础了，但我是初学者。

Matt Haughey 的博客A Whole Lotta Nothing将玫瑰花结插入到每个帖子标题下，作为其帖子模板的一部分。

  • 我如何使用 Firebug 在他的 CSS 中找到这些玫瑰花结的来源？我试过检查 entry-header 元素，但我没有看到任何似乎与玫瑰花结有关的东西。
  • 我猜这些玫瑰花结是 unicode 字符是对的，还是有其他东西在起作用？

谢谢！

4

2 回答 2

1

您浏览器中的开发者工具就是您的朋友。在我的 Safari 中使用“Inspect Element”（也可在 Firefox 中使用），我很快发现在他们theme-journal.css文件的第 121 行中，他们有这种添加玫瑰花结的样式：

.entry-header {
    font-size: 2.4em;
    line-height: 1.3;
    margin: 0 20px 10px;
    background: url(theme-journal_black/date-header-bg.gif) no-repeat 50% bottom;
    padding: 0 0 20px 0;
    text-align: center;
}

按照@jacktheripper 的建议使用h1:after是一个更优雅的想法，但与旧浏览器不兼容。

于 2012-06-10T12:07:27.440 回答
0

您可以使用 ::after 选择器在所有 h1 元素之后添加内容

CSS

h1:after {
    content: url("imagesource.jpg");
    display: block;
}​

看这个活生生的例子

但是，有问题的站点将其用作背景图像。您可以通过使用元素检查器并查看其属性来发现这一点。请参阅随附的屏幕截图

其性质如下：

background: url(theme-journal_black/date-header-bg.gif) no-repeat 50% bottom;
于 2012-06-10T11:57:01.713 回答