W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

W3.CSS 图像



显示图像

Rounded:

Northern Lights

Circle:

Forest

Bordered:

Mountains

Text:

Nature
Nature

圆角图像

Norway

w3-round 类可为图像添加圆角:

Example

<img src="img_fjords.jpg" class="w3-round" alt="Norway">
尝试一下 »

圆形图像

Norway

w3-circle 类可是图像形成一个圆形图像:

Example

<img src="fjords.jpg" class="w3-circle" alt="Norway">
尝试一下 »

边框图像

Norway

w3-border 类可为图像添加边框:

Example

<img src="fjords.jpg" class="w3-border w3-padding" alt="Norway">
尝试一下 »


悬停图像

Norway

w3-hover-opacity 类用于当鼠标悬停图像时增加透明度:

Example

<img src="fjords.jpg" class="w3-hover-opacity" alt="Norway">
尝试一下 »

图像用作于卡片

在 <img> 元素周围添加任何的 w3-card-* 类可包装成一张卡片(添加阴影):

Lights

Person

Simon

The boss of all bosses


Example

<div class="w3-card-4">
  <img src="img_avatar.png" alt="Person">
</div>
尝试一下 »

图像文本

使用 w3-display- 类可将文本放在图像中:

Lights

Top Left

Top Right

Bottom Left

Bottom Right

Middle

Example

<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响应网格系统创建一个在所有设备上效果都不错的相册。稍后您将会了解更多信息。

Summer 2015

5 Terre

Monterosso

Vernazza

Manarola

Corniglia

Riomaggiore


Example

<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>
尝试一下 »