最新のWeb開発のチュートリアル
 

W3.CSS画像


イメージの表示

丸め:

オーロラ

サークル:

森林

フチ:

山地

テキスト:

自然
自然

丸みを帯びたイメージ

ノルウェー

W3-ラウンドクラス画像に丸めコーナーを追加します。

<img src="img_fjords.jpg" class="w3-round" alt="Norway">
»それを自分で試してみてください

丸で囲んだイメージ

ノルウェー

W3-円クラスは円に画像を整形します:

<img src="fjords.jpg" class="w3-circle" alt="Norway">
»それを自分で試してみてください

フチイメージ

ノルウェー

W3-境界クラスは、画像の周囲に境界線を追加します。

<img src="fjords.jpg" class="w3-border w3-padding" alt="Norway">
»それを自分で試してみてください

Hoverableイメージ

ノルウェー

W3-ホバー-不透明度クラスマウスオーバーで画像に透明度を追加します。

<img src="fjords.jpg" class="w3-hover-opacity" alt="Norway">
»それを自分で試してみてください

カードなどの画像

(影を追加)カードとして、それを表示するには、<IMG>要素の周囲にW3-カード- *クラスのいずれかをラップ:

ライト

人

サイモン

すべてのボスのボス


<div class="w3-card-4">
  <img src="img_avatar.png" alt="Person">
</div>
»それを自分で試してみてください

イメージテキスト

W3-display- クラスと画像内のテキストを配置します:

ライト

左上

右上

左下

右下

中間

<div class="w3-display-container">
  <img src="img_lights.jpg" alt="Lights">
  <div class="w3-display-topleft w3-container">Top Left</div>
  <div class="w3-display-topright w3-container">Top Right</div>
  <div class="w3-display-bottomleft w3-container">Bottom Left</div>
  <div class="w3-display-bottomright w3-container">Bottom Right</div>
  <div class="w3-display-middle w3-large">Middle</div>
</div>
»それを自分で試してみてください

フォトアルバムを構築

この例では、すべてのデバイス上で良く見えるのフォトアルバムを作成するW3.CSS応答グリッドシステムを使用しています。 後でこのについての詳細を学びます。

夏2015

5テッレ

モンテロッソ

ヴェルナッツァ

Manarolaの

コルニリア

リオマッジョーレ


<div class="w3-third">
  <div class="w3-card-2">
    <img src="img_monterosso.png" style="width:100%">
    <div class="w3-container">
      <h4>Monterosso</h4>
    </div>
  </div>
</div>
»それを自分で試してみてください