我现在正试图将透明的PNG图像放入reveal.js中:
<div class="slides">
<section>
<img src="sample.png">
<p>sample image</p>
</section>
</div>
以下是样例图片"sample.png":
不过,存在以下问题:
- 边界处出现了白色线条
- 图片并非完全透明(包含一些白色颜色?)
我们该如何去除它?
我现在正试图将透明的PNG图像放入reveal.js中:
<div class="slides">
<section>
<img src="sample.png">
<p>sample image</p>
</section>
</div>
以下是样例图片"sample.png":
不过,存在以下问题:
我们该如何去除它?
实际问题是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; }
<img class="plain" src="myimages.png"/>
<img src="sample.png" style="background:none; border:none; box-shadow:none;">
css
文件,其中有一个元素.reveal section img.plain
可以提供您想要的内容,但带有略微不透明的背景。我编辑了该元素并包含了它。background: rgba(255,255,255,0.0);
而且我得到了想要的结果
<img class="plain" data-src="lib/dist/images/cake_top.png">
样式表:
.reveal section img.plain { background:none; border:none; box-shadow:none; }
css/theme/black.css
。为了覆盖它,我创建了一个css/custom.css
并将其包含在<head>
标签内的index.html
文件中,且需在主题后面:<link rel="stylesheet" href="css/custom.css">
。 - dtk@import "../template/theme";
,否则它将被后者覆盖。 - Ronald P