CSS Bookdown 文档中的自定义

Question

Bookdown 传单地图中控制按钮的默认样式不合我的口味，我想更改它。具体来说，我想删除右上角控制按钮的透明度，并确保按钮图像正确显示。

目前的情况：

我想要的：

编辑 1： 可以找到此文档的实时版本 here。

查看源代码后，似乎 css 负责透明度和丢失图像的样式是：

.book .book-body .page-wrapper .page-inner section.normal a {
    color: #4183c4;
    text-decoration: none;
    background: 0 0;        <-- this line
}

这来自 libs/gitbook-2.6.7/css/style.css:9 和 libs/gitbook-2.6.7/css/style.css:16 中的 css 文件。

有两个问题我想请教一下：

bookdown 用户应该编辑哪个 css 文件来自定义其图书的外观？ [编辑 2： 答案：./css/style.css]
需要什么特定的 css 命令来阻止图像全屏按钮图像消失？

谢谢！

编辑 2： 按照中提供的建议，我能够调整控制按钮的 background-color。这样就解决了透明度问题。我似乎仍然无法显示全屏按钮图像 - 我已经尝试设置 background-image: initial; 但这并没有改变它。欢迎提出建议。

Answer 1

您的问题很可能是 CSS 特异性： https://www.w3.org/TR/CSS2/cascade.html#specificity 这意味着 gitbooks 样式会覆盖 leaflet 的样式，因为它们更具体。

要解决此问题，您可以在传单 CSS 文件中添加很多类，但这有点脏（更脏的解决方法是使用 !important）。我稍微搜索了一下，找到了以下文档，通过在 iFrame 中 linking 地图解决了这个问题，这对你来说也是一个解决方案吗？ https://bookdown.org/yihui/bookdown/web-pages-and-shiny-apps.html

将来可能会使用 shadow 封装 dom: https://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/

来自你的link：

Let’s assume the file is named mathjax-number.html, and it is in the root directory of your book (the directory that contains all your Rmd files). You can insert this file into the HTML head via the in_header option, e.g.,

因此您可以创建自定义 CSS 文件并将其保存在图书的根目录中。按照我的理解，它需要是一个 .html 文件。因为内容好像是写在HTML head 你需要包含样式标签：http://www.w3schools.com/tags/tag_style.asp

在文件中，您可以将 .leaflet-bar a 之类的内容更改为 .book .book-body .page-wrapper .page-inner section.normal .leaflet-bar a，这将赋予更高的特异性。请记住更新以下 CSS 的特异性：

.leaflet-bar a, .leaflet-bar a:hover {
    background-color: #fff;
}

这是因为显然 background: 0 0; 不仅覆盖了背景位置，还覆盖了背景颜色。

Answer 2

@Sandro 的建议提供了解决方案的基本框架。

最后我在 ./css/style.css 文件中添加了以下内容：

.leaflet-top .leaflet-control {
    margin-top: 10px;
    background-color: white !important;
}

.leaflet-control-fullscreen-button .leaflet-bar-part {
        background-image: url("../_book/libs/fullscreen-1.0.1/fullscreen.png") !important;
}

现在按钮按照我想要的方式呈现。

注意： !important; 标签是必需的，否则 gitbook 样式将保留。

Answer 3

所以我采取了一种相当激进的方法，因为这个问题可能会发生在其他传单元素上，比如其他控件、图例、属性。所以我基本上将整个 leaflet.css 作为 bookdownleaflet.css 复制到我的书 rootdir 中，并使每个元素都特定于 bookdown 层次结构。

https://gist.github.com/bhaskarvk/acc14421598d76f65da6a2c153a07865

这可能有点矫枉过正，但我认为这样做更好，因为它一次性解决了传单地图的所有元素，而且我不需要调试可能导致问题的每个元素。

CSS Bookdown 文档中的自定义

CSS Customization in a Bookdown Document

css

r

bookdown