如何在reveal.js中设置图像样式？答案

【问题标题】：How to style images in reveal.js?如何在reveal.js中设置图像样式？
【发布时间】：2014-04-15 11:42:17
【问题描述】：

我现在正在尝试将透明 png 图像放入reveal.js 中：

<div class="slides">
    <section>
        <img src="sample.png">
        <p>sample image</p>
    </section>
</div>

下面是“sample.png”图。

但是，有：

我们怎样才能删除它？

【问题讨论】：

标签： reveal.js

【解决方案1】：

实际的问题是，reveal.js 有一种样式，它为图像添加低不透明度的白色背景、框阴影和边框，如下所示：

.reveal section img { 
    background: rgba(255, 255, 255, 0.12); 
    border: 4px solid #eeeeee;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15) 
}

所以解决方法是用以下代码覆盖该样式：

.reveal section img { background:none; border:none; box-shadow:none; }

【讨论】：

ftr：样式在主题的css中设置，例如css/theme/black.css。为了覆盖它，我创建了一个css/custom.css 并将其包含在index.html 的<head> 中主题：<link rel="stylesheet" href="css/custom.css">。
如果您想将您的个性化样式表修改为 .scss，上面必须在 @import "../template/theme"; 行之后，否则它将被后者覆盖
2020 年，这仍然是完美的解决方案。谢谢！

【解决方案2】：

在 3.3.0 版本中，有一个类 Plain 可以去除边框、阴影和背景

<img class="plain"  src="myimages.png"/>

【讨论】：

【解决方案3】：

如果您只想在特定图像上移除此效果而不是在 CSS 文件中全局关闭它，请将以下样式属性添加到您的图像标签：

<img src="sample.png" style="background:none; border:none; box-shadow:none;">

【讨论】：

【解决方案4】：

在@cmorrow 回答（和 cmets）之后，我更新了查看 css 文件，有一个元素 .reveal section img.plain 提供了您想要的内容，但背景略微不透明。我编辑了那个元素并包含了

background: rgba(255,255,255,0.0);

我得到了想要的结果

【讨论】：

【解决方案5】：

只要 CSS 规则保持不变，那么只需创建自己的类并将其粘贴在您认为合适的任何图像上。

HTML：

<img class="plain" data-src="lib/dist/images/cake_top.png">

样式表：

.reveal section img.plain { background:none; border:none; box-shadow:none; }

【讨论】：