W3.CSS 图片
Rounded:
Circle:
Bordered:
Text:
Nature
圆形图像
w3-round 类为图像添加圆角:
实例
<img src="img_snowtops.jpg" class="w3-round" alt="Norway"> 亲自试一试 »圆形图像
w3-circle 类将图像塑造成圆形:
实例
<img src="snowtops.jpg" class="w3-circle" alt="Alps"> 亲自试一试 »带边框的图片
w3-border 类在图像周围添加边框:
实例
<img src="snowtops.jpg" class="w3-border w3-padding" alt="Alps"> 亲自试一试 »图像作为卡片
将任何 w3-card-* 类包裹在 <img> 元素周围以将其显示为卡片（添加阴影）:
Simon
The boss of all bosses
实例
<div class="w3-card-4"><img src="img_avatar.png" alt="Person">
</div> 亲自试一试 »
图像文本
使用 w3-display-classes 定位图像中的文本:
Top Left
Top Right
Bottom Left
Bottom Right
Left
Right
MiddleTop Middle
Bottom Middle
实例
<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-left w3-container">Left</div>
<div class="w3-display-right w3-container">Right</div>
<div class="w3-display-middle w3-large">Middle</div>
<div class="w3-display-topmiddle w3-container">Top Middle</div>
<div class="w3-display-bottommiddle w3-container">Bottom Middle</div>
</div> 亲自试一试 »
响应式图像
可以将图像设置为自动调整自身大小以适应其容器的大小。
如果您希望图像在必要时缩小，但绝不放大到大于其原始大小，请使用 w3-image 类。
实例
<img src="img_lights.jpg" alt="Lights" class="w3-image"> 亲自试一试 »如果您希望图像根据响应度向上和向下缩放，请将 CSS 宽度属性设置为 100%:
实例
<img src="img_lights.jpg" alt="Lights" style="width:100%"> 亲自试一试 »如果你想限制响应图像的最大尺寸，使用 max-width 属性:
实例
<img src="img_lights.jpg" alt="Lights" style="width:100%;max-width:400px"> 亲自试一试 »不透明度
w3-opacity 类使图像透明:
Normal
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 类为图像添加灰度效果:
Normal
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"> 亲自试一试 »
注释: IE 11 及更早版本不支持 w3-grayscale 类。
棕褐色
w3-sepia 类为图像添加棕褐色效果:
Normal
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"> 亲自试一试 »
注释: IE 11 及更早版本不支持 w3-sepia 类。
悬停效果
您还可以在悬停/鼠标悬停时添加特殊效果。
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 响应式网格系统来创建一个在所有设备上看起来都不错的相册。稍后您将了解更多相关信息。
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> 亲自试一试 »
