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

Question

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

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

where figure＆＃34; sample.png＆＃34;如下。

然而，有：

• 白线出现在图的边界
• 并且图形不完整透明。 （包含一些白色？）

我们如何删除它？

Answer 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; }

Answer 2

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

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

Answer 3

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

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

Answer 4

关注@cmorrow回答（和评论）后，我更新了css文件，有一个元素.reveal section img.plain提供了你想要的东西，但背景稍微不透明。我编辑了那个元素并包含了

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

我有理想的结果

Answer 5

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

HTML：

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

The StlyleSheet：

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