html 右上角图标r,html – Rmarkdown中TOC上的图像徽标

你在这里有几个选择,我将概述其中两个

1.之前使用CSS伪元素

以下代码段将在第一个TOC元素上方和TOC框中添加stackoverflow徽标：

#TOC {

background: url("https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a");

background-size: contain;

padding-top: 80px !important;

background-repeat: no-repeat;

}

在这里,您必须根据您的徽标调整填充顶部定义.结果看起来或多或少像这样：

2.在TOC列中添加新的DOM元素

另一种方法是首先使用jQuery来添加一个包含图像的新DOM元素：

$(document).ready(function() {

$('#TOC').parent().prepend('

');

});

这里,当文档加载完毕后,我们选择id为TOC的元素,然后向上移动到其父元素(列div),然后在其中添加一个包含图像的id为nav_logo的新div.听起来比实际更复杂.

现在我们只需要再次使用一些CSS编辑这个新div的样式：

#nav_logo {

width: 100%;

margin-top: 20px;

}

这里生成的文档如下所示：

有关CSS的详细信息,我会向您推荐大型搜索引擎,而这些搜索引擎很可能会将您推荐给https://www.w3schools.com.

如果我必须选择,我会进行第二次尝试.伪元素在浏览器中并不总是可靠的.它看起来也更好:)