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.

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

cmorrow · Accepted Answer · 2014-09-26T10:07:37.943

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

edited Sep 26 '14 at 10:07

answered Sep 26 '14 at 09:56

cmorrow

556
6
9

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 `` of the `index.html` _after_ the theme: ``. – dtk Jan 22 '16 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 – Ronald P Dec 11 '17 at 08:21
its 2020 and this is still the perfect solution. Thanks! – klewis Mar 26 '20 at 23:38

score 38 · Answer 2 · answered Sep 10 '16 at 09:40

38

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

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

answered Sep 10 '16 at 09:40

ulrich

3,547
5
35
49

score 22 · Answer 3 · answered Dec 29 '14 at 09:26

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

answered Dec 29 '14 at 09:26

bkimminich

416
3
11

score 0 · Answer 4 · answered Feb 27 '18 at 15:29

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

score 0 · Answer 5 · answered Mar 26 '20 at 23:42

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

How to style images in reveal.js?

5 Answers5