W3.CSS 图像
圆角：
圆圈：
有边框：
文本：
自然
圆形图像
这个w3-轮类向图像添加圆角：
带圆圈的图像
这个w3-圆类将图像塑造为圆形：
带边框的图像
这个w3边框类在图像周围添加边框：
图像作为卡片
包裹任何一个w3-卡-*<img> 元素周围的类将其显示为卡片（添加阴影）：
西蒙
所有老板中的老板
图像文字
将文本放置在图像中w3-显示-类：
左上方
右上
左下方
右下角
左边
正确的
中间
中上层
中下
示例
<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-不透明度类使图像透明：
普通的
w3-不透明度-最小值
w3-不透明度
w3-不透明度-最大值
示例
<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-灰度类向图像添加灰度效果：
普通的
w3-灰度-最小值
w3-灰度
w3 灰度最大
示例
<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-棕褐色类为图像添加棕褐色效果：
普通的
w3-棕褐色-分钟
w3-棕褐色
w3-棕褐色-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-悬停不透明度
w3-悬停灰度
w3-悬停-棕褐色
示例
<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-悬停不透明度类在鼠标悬停时为图像添加透明度，并且w3-悬停不透明度关闭类消除了鼠标悬停时的透明度。
示例
<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 响应式网格系统创建一个在所有设备上看起来都不错的相册。稍后您将了解更多相关信息。
2015年夏季
5 特雷
蒙特罗索
韦尔纳扎
马纳罗拉
科尔尼利亚
里奥马焦雷
示例
<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>
亲自试一试»