Как стилизовать изображения в opens.js?

Теперь я пытаюсь поместить прозрачное png-изображение в show.js как:

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

где следует цифра "sample.png".

enter image description here

Однако есть:

  • белые линии появляются на границе рисунка
  • и цифра не прозрачна. (содержит белый цвет?)

Как его удалить?

enter image description here

ОТВЕТЫ

Ответ 1

Фактическая проблема заключается в том, что у open.js есть стиль, который добавляет белый фон с низкой непрозрачностью, тень коробки и границу с изображениями, как показано ниже:

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

Таким образом, исправление заключается в переопределении этого стиля с помощью:

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

Ответ 2

Если вы просто хотите удалить этот эффект на определенные изображения, а не отключать его глобально в файле CSS, добавьте следующий атрибут стиля в свой тег изображения:

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

Ответ 3

В версии 3.3.0 есть класс Plain, который удаляет границу, тень и фон

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