显示图像
圆润:

圈:

边距:

文本:

性质
圆角图片

W3号轮类添加圆角到图像:
盘旋图片

W3的圈类的形式,以一个圆形的图像:
镶上图片

W3的边界类添加图像周围的边框:
Hoverable图片

W3的悬停不透明度类增加透明度,在鼠标悬停图片:
图像作为卡
任何包裹围绕在<img>元素中的W3-卡式*类来显示它作为一个卡(添加阴影):


西蒙
所有老板老板
图像文本
与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>
试一试»