I am now trying to put transparent png image in reveal.js as:
<div class="slides">
<section>
<img src="sample.png">
<p>sample image</p>
</section>
</div>
where figure "sample.png" is follows.
However, there are:
How can we remove it?
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:
.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)
}
So the fix is to override that style with:
.reveal section img { background:none; border:none; box-shadow:none; }