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>
自己试试 »
