W3.CSS 图片
圆角
圆形
带边框
文本
圆角图片
w3-round 类为图片添加圆角
圆形图片
w3-circle 类将图片形状设置为圆形
带边框的图片
w3-border 类在图片周围添加边框
图片作为卡片
将任何 w3-card-* 类包装在 <img> 元素周围，以将其显示为卡片（添加阴影）
西蒙
所有老板的老板
图片文本
使用 w3-display-类 在图片中定位文本
左上角
右上角
左下角
右下角
左边
右边
上中间
下中间
示例
<div class="w3-display-container">
<img src="img_lights.jpg" alt="灯光">
<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="森林" class="w3-opacity-min">
<img src="img_forest.jpg" alt="森林" class="w3-opacity">
<img src="img_forest.jpg" alt="森林" class="w3-opacity-max">
亲自试一试 »
灰度
w3-grayscale 类为图片添加灰度效果
正常
w3-grayscale-min
w3-grayscale
w3-grayscale-max
示例
<img src="image.jpg" alt="桌子" class="w3-grayscale-min">
<img src="image.jpg" alt="桌子" class="w3-grayscale">
<img src="image.jpg" alt="桌子" class="w3-grayscale-max">
亲自试一试 »
注意：w3-grayscale 类在 IE 11 及更早版本中不支持。
褐色
w3-sepia 类为图片添加褐色效果
正常
w3-sepia-min
w3-sepia
w3-sepia-max
示例
<img src="image.jpg" alt="桌子" class="w3-sepia-min">
<img src="image.jpg" alt="桌子" class="w3-sepia">
<img src="image.jpg" alt="桌子" class="w3-sepia-max">
亲自试一试 »
注意：w3-sepia 类在 IE 11 及更早版本中不支持。
悬停效果
您还可以添加悬停/鼠标悬停时的特殊效果。
w3-hover-opacity
w3-hover-grayscale
w3-hover-sepia
示例
<img src="image.jpg" alt="爱因斯坦" class="w3-hover-opacity">
<img src="image.jpg" alt="爱因斯坦" class="w3-hover-grayscale">
<img src="image.jpg" alt="爱因斯坦" class="w3-hover-sepia">
亲自试一试 »
关闭不透明度
在悬停时添加透明度
在悬停时移除透明度
w3-hover-opacity 类在鼠标悬停时为图片添加透明度，而 w3-hover-opacity-off 类在鼠标悬停时移除透明度。
示例
<img src="snowtops.jpg" class="w3-hover-opacity" alt="阿尔卑斯山">
<img src="snowtops.jpg" class="w3-opacity w3-hover-opacity-off" alt="阿尔卑斯山">
亲自试一试 »
构建相册
在此示例中，我们使用 W3.CSS 响应式网格系统创建了一个在所有设备上看起来都很好看的相册。您将在稍后学习有关此系统的更多信息。
2015 年夏季
五渔村
蒙特罗索
韦尔纳扎
马纳罗拉
科尔尼利亚
里奥马焦雷
示例
<div class="w3-third">
<div class="w3-card">
<img src="img_monterosso.jpg" style="width:100%">
<div class="w3-container">
<h4>蒙特罗索</h4>
</div>
</div>
</div>
亲自试一试 »
