css 夸托标题幻灯片上的全覆盖背景图像，沿着底部有一排图标

a2mppw5e 于 2023-06-07 发布在其他

关注(0)|答案(2)|浏览(149)

我正在尝试使用Rstudio和夸托为reavaljs演示文稿制作标题幻灯片。我希望我的标题幻灯片有全覆盖的背景图像和一个或多个小图标沿着底部（但不是在其他幻灯片）。我曾尝试修改this method建议xaringan，但没有任何成功。下面是我的.qmd YAML和css：

---
title: "Test Presentation"
author: "Name"
format: 
  revealjs:
    embed-resources: true
    css: css/slides.css
editor: source
---

slides.css

.title-slide {
  background-image: url(https://placeholder.pics/svg/100),
                    url(https://picsum.photos/id/870/800/600?grayscale);
  background-position: 2% 98%, center;
  background-size: 100px, cover;
}

我也尝试过改变标题-幻灯片-属性来提供多个图像，但找不到有效的语法。
根据下面@shafee的回复，我试过了：

---
title: "Test Presentation"
author: "Name"
format: 
  revealjs:
    theme: night
    embed-resources: true
    title-slide-attributes: 
      data-background-image: "https://placeholder.pics/svg/100,https://picsum.photos/id/870/800/600?grayscale"
      data-background-size: 100px, cover
      data-background-position: 2% 98%, center
editor: source
---

问题是，当我将revaljs从它自己的行中拉出来，以便我可以包括其他细节，如嵌入资源，只有图标显示在标题幻灯片上。如果我颠倒它们的顺序，则会显示背景图像（以彩色而不是灰度），但不显示图标。无论标题-幻灯片-属性块是否缩进，都会发生相同的行为。

css

来源：https://stackoverflow.com/questions/76406755/full-coverage-background-image-on-quarto-title-slide-with-a-row-of-icons-along-t

2条答案

按热度按时间

cnwbcb6i1#

你也可以使用title-slide-attributes为夸托revealjs做同样的事情。
只需在字符串中传递图像路径（逗号分隔）。

---
title: "Test Presentation"
author: "Name"
format: revealjs
title-slide-attributes: 
  data-background-image: "https://placeholder.pics/svg/100,https://picsum.photos/id/870/800/600?grayscale"
  data-background-size: 100px, cover
  data-background-position: 2% 98%, center
  
---

## Quarto

Quarto enables you to weave together content and executable code into a finished presentation.

## Bullets

When you click the **Render** button a document will be generated that includes:

-   Content authored with markdown
-   Output from executable code

赞(0）回复(0）举报 2023-06-07

wwwo4jvm2#

多亏了@shafee，这个问题已经解决了。显然embed-resources与复杂的标题幻灯片不兼容。这太糟糕了，因为我通常不能为会议提供文件夹-他们希望我提供一个单独的文件以供展示和共享。我不确定这是一个bug，但它肯定是夸托/posit开发人员需要考虑的一个设计特性。
但从短期来看，这很棒。谢谢你的帮助！

---
title: "Test Presentation"
author: "Name"
format: 
  revealjs:
    theme: night
    scrollable: true
    echo: true
    incremental: false 
    code-fold: true
    code-overflow: scroll
    embed-resources: false
    title-slide-attributes: 
      data-background-image: "https://placeholder.pics/svg/100, https://placeholder.pics/svg/100,https://placeholder.pics/svg/100, https://picsum.photos/id/870/800/600?grayscale"
      data-background-size: 100px, 100px, 100px, cover
      data-background-position: "2% 98%, 50% 98%, 98% 98%, center"
editor: source
---

这产生：

赞(0）回复(0）举报 2023-06-07

我来回答

css 夸托标题幻灯片上的全覆盖背景图像，沿着底部有一排图标

2条答案

相关问题

热门标签

最新问答