2

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

它目前的样子： bookdown 传单地图中不需要的透明度

我想要的是： 我想要的样式

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

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

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

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

我想请教的两个问题：

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

谢谢！

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

4

3 回答 3

2

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

要解决这个问题，您可以在传单 CSS 文件中添加很多类，但这会有点脏（更脏的解决方法是使用 !important）。我搜索了一下，找到了以下文档，通过在 iFrame 中链接地图解决了问题，这对你来说也是一个解决方案吗？ 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/

从您的链接：

假设该文件名为 mathjax-number.html，它位于书的根目录（包含所有 Rmd 文件的目录）。您可以通过 in_header 选项将此文件插入 HTML 头部，例如，

因此，您可以创建自定义 CSS 文件并将其保存在书的根目录中。我认为它需要是一个 .html 文件。因为内容似乎写在 HTML 头中，您需要包含样式标签：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;不仅覆盖了背景位置，而且覆盖了背景颜色。

于 2016-12-05T20:36:59.357 回答
1

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

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

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

于 2016-12-07T23:34:30.143 回答
0

@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 样式将保留。

于 2016-12-05T22:24:13.173 回答