是否可以在 xaringan 幻灯片中调整背景图像的不透明度？

Question

在使用 xaringan 和 R markdown 创建演示文稿时是否可以调整背景图像的不透明度？例如，这里是 Ninja 模板，只有 Karl 的幻灯片作为背景。我需要做什么来改变这个背景的不透明度？

编辑：澄清一下，我希望能够根据具体情况调整背景不透明度，而不是针对幻灯片放映中的每个背景图像。

---
title: "Presentation Ninja"
subtitle: "⚔<br/>with xaringan"
author: "Yihui Xie"
institute: "RStudio, PBC"
date: "2016/12/12 (updated: `r Sys.Date()`)"
output:
  xaringan::moon_reader:
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
---


background-image: url(`r xaringan:::karl`)
background-position: 50% 50%
class: right, top

# You only live once!

Answer 1

您需要使用 CSS 调整包含图像的父元素 (a <div>) 的不透明度。简单地包含一个代码块来定义一个 CSS class 来调整不透明度是很方便的，例如

```{css, echo = F}
.reduced_opacity {
  opacity: 0.5;
}
```

然后将此 class 应用于幻灯片：

---
background-image: url(`r xaringan:::karl`)
background-position: 50% 50%
class: right, top, reduced_opacity
# You only live once!

但是，这将降低整张幻灯片的不透明度，因为幻灯片 'lives' 中的所有内容都在这张 <div> 中。为避免这种情况，您可以包含带有 class 的图像，向幻灯片添加 pseudo-element（使用 ::before）并像这样调整不透明度

```{css, echo = F}
.bg_karl {
  position: relative;
  z-index: 1;
}

.bg_karl::before {    
      content: "";
      background-image: url('https://github.com/yihui/xaringan/releases/download/v0.0.2/karl-moustache.jpg');
      background-size: cover;
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      opacity: 0.5;
      z-index: -1;
}
```

然后将.bg_karl添加到幻灯片：

---
class: right, top, bg_karl
# You only live once!

是否可以在 xaringan 幻灯片中调整背景图像的不透明度？

Is it possible to adjust background image opacity in a xaringan slideshow?

r

xaringan