How to style images in reveal.js?

Question

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:

• white lines appear at the boundary of the figure
• and the figure is not prefect transparent. (contains some white color?)

How can we remove it?

Answer 1

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

Answer 2

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

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