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

问题描述

在创建具有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!

解决方法

您需要使用CSS调整包含图像的父元素（<div>）的不透明度。简单地包含一个定义CSS类的代码块是很方便的，该类可以调整不透明度，例如，

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

，然后将此类应用于幻灯片：

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

但是，这将减少整个幻灯片的不透明度，因为幻灯片上的所有内容都“存在”于此<div>中。为避免这种情况，您可以将图像包含在类中，该类向幻灯片添加伪元素（使用::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,bg_karl
# You only live once!