How to style images in reveal.js?

E

5

29

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.

enter image description here

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?

enter image description here

Estellaestelle answered 15/4, 2014 at 11:42 Comment(0)

P

43

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

Porkpie answered 26/9, 2014 at 9:56 Comment(3)

Ftr: the style is set in the css of the theme, e.g. css/theme/black.css. To override it, I created a css/custom.css and included that in the <head> of the index.html after the theme: <link rel="stylesheet" href="css/custom.css">. – Catchings 22/1, 2016 at 15:15

If you'd like to modify your personalised style sheet as a .scss the above must come after the line @import "../template/theme"; if not it will be overriden by the latter – Hyla 11/12, 2017 at 8:21

its 2020 and this is still the perfect solution. Thanks! – Rutabaga 26/3, 2020 at 23:38

W

38

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

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

Wilmington answered 10/9, 2016 at 9:40 Comment(0)

V

22

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:

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

Vacla answered 29/12, 2014 at 9:26 Comment(0)

N

0

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

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

and I have the desired outcome

Nephelometer answered 27/2, 2018 at 15:29 Comment(0)

R

0

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:

<img class="plain" data-src="lib/dist/images/cake_top.png">

The StlyleSheet:

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

Rutabaga answered 26/3, 2020 at 23:42 Comment(0)

Recommended topics

Hot tags