顯示圖像
圓潤：
圈：
邊距：
文本：
性質
圓角圖片
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>
試一試»