最新的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-显示- 图像中的文本位置:

灯火

左上角

右上

左下方

右下角

中间

<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渔村

蒙特罗索

韦尔纳扎

马纳罗拉

柯尔尼利亚

里奥马焦雷


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