blocks|key|2959330|text|实际问题是，reveal.js的样式为图像添加了低不透明度的白色背景、方框阴影和边框，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2959331|.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)+
}|code-block|syntax|javascript|2959332|因此，修复方法是使用以下内容覆盖该样式：|2959333|.reveal+section+img+{+background:none;+border:none;+box-shadow:none;+}|2959334|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

The actual problem is that reveal.js has a style which adds a white background at low opacity, a box-shadow, and a border to images as seen below:

<pre><code>.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) 
}
</code></pre>

So the fix is to override that style with:

<pre><code>.reveal section img { background:none; border:none; box-shadow:none; }
</code></pre>

blocks|key|159921|text|如果只想在特定图像上删除此效果，而不是在CSS文件中将其全局关闭，请将以下style属性添加到图像标签中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|159922|<img+src="sample.png"+style="background:none;+border:none;+box-shadow:none;">|code-block|syntax|javascript|159923|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you just want to remove this effect on specific images instead of turning it off globally in the CSS file, add the following style attribute to your image tag:

<pre><code>&lt;img src="sample.png" style="background:none; border:none; box-shadow:none;"&gt;
</code></pre>

blocks|key|157442|text|在3.3.0版本中，有一个类Plain可以删除边框、阴影和背景|type|unstyled|depth|inlineStyleRanges|entityRanges|data|157443|<img+class="plain"++src="myimages.png"/>|code-block|syntax|javascript|157444|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

In version 3.3.0 there is a class Plain which removes border, shadow and background

<pre><code>&lt;img class="plain" src="myimages.png"/&gt;
</code></pre>

blocks|key|159951|text|在@cmorrow回答(和评论)之后，我更新了一下css文件，有一个元素.reveal+section+img.plain，它提供了你想要的东西，但背景有点不透明。我编辑了该元素并包含了|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|159952|background:+rgba(255,255,255,0.0);|code-block|syntax|javascript|159953|我得到了想要的结果|159954|entityMap^0|P|3|10|P|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

Following @cmorrow answer (and the comments), I updated looked into the <code>css</code> file, there is an element <code>.reveal section img.plain</code> which offers what you want but with a slightly opaque background. I edited that element and included 

<pre><code>background: rgba(255,255,255,0.0);
</code></pre>

and I have the desired outcome

blocks|key|2746892|text|只要CSS规则保持不变，那么只需创建您自己的类，并将其粘贴到您认为合适的任何图像上。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2746893|HTML：|2746894|<img+class="plain"+data-src="lib/dist/images/cake_top.png">+|code-block|syntax|javascript|2746895|StlyleSheet：|2746896|.reveal+section+img.plain+{+background:none;+border:none;+box-shadow:none;+}|2746897|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

As long as the CSS rules remain the same, then just create your own class and stick it on any image you see fit. 

The HTML:

<pre><code>&lt;img class="plain" data-src="lib/dist/images/cake_top.png"&gt; 
</code></pre>

The StlyleSheet:

<pre><code>.reveal section img.plain { background:none; border:none; box-shadow:none; }
</code></pre>

I am now trying to put transparent png image in reveal.js as:

<pre><code>&lt;div class="slides"&gt;
 &lt;section&gt;
 &lt;img src="sample.png"&gt;
 &lt;p&gt;sample image&lt;/p&gt;
 &lt;/section&gt;
&lt;/div&gt;
</code></pre>

where figure "sample.png" is follows.

<img src="https://i.stack.imgur.com/60gib.png" alt="enter image description here">

However, there are:

<ul>
<li>white lines appear at the boundary of the figure</li>
<li>and the figure is not prefect transparent. (contains some white color?)</li>
</ul>

How can we remove it?

<img src="https://i.stack.imgur.com/PXAKf.png" alt="enter image description here">

How to style images in reveal.js?

图像标签

我现在正在尝试将透明的png图像放在reveal.js中为：<div class="slides"> <section> <img src="sample.png"> sample image </section></div>其中图"sample.png“如下所示。...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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