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

Question

29

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

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

以下是样例图片"sample.png":

enter image description here

不过，存在以下问题：

我们该如何去除它？

enter image description here

- eng27

5个回答

38

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

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

- ulrich

22

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

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

- bkimminich

0

根据@cmorrow的回答（以及评论），我更新了css文件，其中有一个元素.reveal section img.plain可以提供您想要的内容，但带有略微不透明的背景。我编辑了该元素并包含了它。

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

而且我得到了想要的结果

- Yotam

0

只要 CSS 规则保持不变，那么就创建自己的类并将其附加到任何你认为合适的图像上。

HTML 代码：

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

样式表：

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

- klewis

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cmorrow · Accepted Answer

实际问题是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; }