W3.CSS 圖片
圓角
圓形
帶邊框
文字
圓角圖片
w3-round 類為圖片新增圓角
圓形圖片
w3-circle 類將圖片塑造成圓形
帶邊框的圖片
w3-border 類在圖片周圍新增邊框
圖片作為卡片
將任何 w3-card-* 類包裝在 <img> 元素周圍，將其顯示為卡片（新增陰影）
Simon
The boss of all bosses
影像文字
使用 w3-display-類在圖片中定位文字
左上角
右上角
左下角
右下角
Left
Right
頂部中間
底部中間
示例
<div class="w3-display-container">
<img src="img_lights.jpg" alt="Lights">
<div class="w3-display-topleft w3-container">左上角</div>
<div class="w3-display-topright w3-container">右上角</div>
<div class="w3-display-bottomleft w3-container">左下角</div>
<div class="w3-display-bottomright w3-container">右下角</div>
<div class="w3-display-left w3-container">左邊</div>
<div class="w3-display-right w3-container">右邊</div>
<div class="w3-display-middle w3-large">中間</div>
<div class="w3-display-topmiddle w3-container">頂中間</div>
<div class="w3-display-bottommiddle w3-container">底中間</div>
</div>
自己試試 »
響應式圖片
圖片可以自動調整大小以適應其容器的大小。
如果您希望圖片在需要時縮小，但不要放大到大於其原始尺寸，請使用 w3-image 類。
如果您希望圖片在響應式設計時同時放大和縮小，請將 CSS width 屬性設定為 100%
如果您想限制響應式圖片的的最大尺寸，請使用 max-width 屬性
不透明度
w3-opacity 類使圖片透明
正常
w3-opacity-min
w3-opacity
w3-opacity-max
示例
<img src="img_forest.jpg" alt="Forest" class="w3-opacity-min">
<img src="img_forest.jpg" alt="Forest" class="w3-opacity">
<img src="img_forest.jpg" alt="Forest" class="w3-opacity-max">
自己試試 »
灰度
w3-grayscale 類為圖片新增灰度效果
正常
w3-grayscale-min
w3-grayscale
w3-grayscale-max
示例
<img src="image.jpg" alt="Table" class="w3-grayscale-min">
<img src="image.jpg" alt="Table" class="w3-grayscale">
<img src="image.jpg" alt="Table" class="w3-grayscale-max">
自己試試 »
注意: w3-grayscale 類在 IE 11 及更早版本中不支援。
棕褐色
w3-sepia 類為圖片新增棕褐色效果
正常
w3-sepia-min
w3-sepia
w3-sepia-max
示例
<img src="image.jpg" alt="Table" class="w3-sepia-min">
<img src="image.jpg" alt="Table" class="w3-sepia">
<img src="image.jpg" alt="Table" class="w3-sepia-max">
自己試試 »
注意: w3-sepia 類在 IE 11 及更早版本中不支援。
懸停效果
您還可以新增特殊的懸停/滑鼠移入效果。
w3-hover-opacity
w3-hover-grayscale
w3-hover-sepia
示例
<img src="image.jpg" alt="Einstein" class="w3-hover-opacity">
<img src="image.jpg" alt="Einstein" class="w3-hover-grayscale">
<img src="image.jpg" alt="Einstein" class="w3-hover-sepia">
自己試試 »
透明度關閉
滑鼠移入時新增透明度
滑鼠移入時移除透明度
w3-hover-opacity 類在滑鼠移入時為圖片新增透明度，而 w3-hover-opacity-off 類在滑鼠移入時移除透明度。
示例
<img src="snowtops.jpg" class="w3-hover-opacity" alt="Alps">
<img src="snowtops.jpg" class="w3-opacity w3-hover-opacity-off" alt="Alps">
自己試試 »
構建相簿
在此示例中，我們使用 W3.CSS 響應式網格系統來建立一個在所有裝置上看起來都不錯的相簿。您將在稍後瞭解更多資訊。
Summer 2015
5 Terre
Monterosso
Vernazza
Manarola
Corniglia
Riomaggiore
示例
<div class="w3-third">
<div class="w3-card">
<img src="img_monterosso.jpg" style="width:100%">
<div class="w3-container">
<h4>Monterosso</h4>
</div>
</div>
</div>
自己試試 »
