¿Cómo estilizar las imágenes en reveal.js?

Question

Ahora estoy tratando de poner una imagen png transparente en reveal.js como:

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

donde la figura "sample.png" es la siguiente.

Sin embargo, hay:

• Aparecen líneas blancas en el límite de la figura.
• Y la figura no es prefecta transparente. (contiene algún color blanco?)

¿Cómo podemos eliminarlo?

Answer 1

Después de la respuesta de @cmorrow (y los comentarios), actualicé el archivo css , hay un elemento .reveal section img.plain que ofrece lo que desea pero con un fondo ligeramente opaco. Edité ese elemento e incluí

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

y tengo el resultado deseado

Answer 2

El problema real es que reveal.js tiene un estilo que agrega un fondo blanco a baja opacidad, una sombra de cuadro y un borde a las imágenes como se ve a continuación:

.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) 
}

Así que la solución es anular ese estilo con:

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

Answer 3

En la versión 3.3.0 hay una clase Plain que elimina el borde, la sombra y el fondo

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

Answer 4

Si solo desea eliminar este efecto en imágenes específicas en lugar de desactivarlo globalmente en el archivo CSS, agregue el siguiente atributo de estilo a su etiqueta de imagen:

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