W3.CSS 图像
Rounded:
Circle:
Bordered:
Text:
圆形图像
w3-round 类为图像添加圆角:
圆形图像
w3-circle 类将图像塑造成圆形:
带边框的图片
w3-border 类在图像周围添加边框:
图像作为卡片
将任何 w3-card-* 类包裹在 <img> 元素周围以将其显示为卡片（添加阴影）:
Simon
The boss of all bosses
图像文本
使用 w3-display-classes 定位图像中的文本:
Top Left
Top Right
Bottom Left
Bottom Right
Left
Right
Top 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 类。
如果您希望图像根据响应度向上和向下缩放，请将 CSS 宽度属性设置为 100%:
如果你想限制响应图像的最大尺寸，使用 max-width 属性:
不透明度
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 响应式网格系统来创建一个在所有设备上看起来都不错的相册。稍后您将了解更多相关信息。
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>
亲自试一试 »
