免费AI编程助手
W3.CSS Images (图像)
圆角图像
使用 w3-round 类制作图像的圆角：
带圆圈的图像
使用 w3-circle 类制作带圆圈的图像：
带边框的图像
使用 w3-border 类制作带边框的图像：
卡片化图像
使用 w3-card-* 类包装在 <img> 元素周围，以将其显示为卡片（添加阴影）：
图像文本
使用 w3-display-classes 将文本放置在图像中：
实例
<div class="w3-display-container w3-text-white">
<img src="img_lights.jpg" alt="Lights" style="width:100%">
<div class="w3-display-topleft w3-container"><p>左上方</p></div>
<div class="w3-display-topright w3-container"><p>右上方</p></div>
<div class="w3-display-bottomleft w3-container"><p>左下方</p></div>
<div class="w3-display-bottomright w3-container"><p>右下方</p></div>
<div class="w3-display-left w3-container"><p>左</p></div>
<div class="w3-display-right w3-container"><p>右</p></div>
<div class="w3-display-middle w3-large">中间</div>
<div class="w3-display-topmiddle w3-container"><p>顶部</p></div>
<div class="w3-display-bottommiddle w3-container"><p>底部</p></div>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
响应式图像
可以将图像设置为自动调整自身大小以适合其容器的大小。
如果要根据需要缩小图像，但绝不要放大到大于原始大小，请使用 w3-image 类。
如果要将响应图像限制为最大大小，请使用 max-width 属性：
实例
<img src="img_lights.jpg" alt="Lights" style="width:100%;max-width:400px">
尝试一下 »
点击“尝试一下”按钮查看在线实例
不透明度
w3-opacity 类使图像透明：
实例
<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 类为图像增加一个灰度效果：
实例
<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 类为图像添加棕褐色效果：
实例
<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 类。
悬停效果
您还可以在悬停/鼠标悬停上添加特殊效果。
实例
<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 响应网格系统创建在所有设备上看起来都不错的相册。稍后您将详细了解。
实例
<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>
尝试一下 »
点击“尝试一下”按钮查看在线实例
更多建议：