web-dev-qa-db-ja.com

Reveal.jsで画像のスタイルを設定する方法は？

私は今、透明なpng画像をreify.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

reveal.js
26
eng27

実際の問題は、以下に示すように、reveal.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; }
34
cmorrow

バージョン3.3.0には、ボーダー、シャドウ、バックグラウンドを削除するプレーンクラスがあります。

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

CSSファイルでグローバルに無効にするのではなく、特定の画像に対するこの効果を削除するだけの場合は、次のスタイル属性を画像タ​​グに追加します。

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

CSSルールが同じである限り、独自のクラスを作成し、適切と思われる画像に貼り付けます。

HTML：

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

StlyleSheet：

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

@cmorrowの回答（およびコメント）に続いて、cssファイルを調べて更新しました。必要なものを提供する要素.reveal section img.plainがありますが、背景は少し不透明です。その要素を編集して含めました

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

そして私は望ましい結果を持っています

0
Yotam