css图片向右移动w3c,W3.CSS Images (图像)

圆角图像

使用w3-round 类制作图像的圆角：

实例

尝试一下 »

点击“尝试一下”按钮查看在线实例

带圆圈的图像

使用w3-circle类制作带圆圈的图像：

实例

尝试一下 »

点击“尝试一下”按钮查看在线实例

带边框的图像

使用 w3-border类制作带边框的图像：

实例

尝试一下 »

点击“尝试一下”按钮查看在线实例

卡片化图像

使用w3-card-*  类包装在 元素周围，以将其显示为卡片(添加阴影)：

实例

尝试一下 »

点击“尝试一下”按钮查看在线实例

图像文本

使用 w3-display-classes将文本放置在图像中：

实例

左上方

右上方

左下方

右下方

左

右

中间

顶部

底部

尝试一下 »

点击“尝试一下”按钮查看在线实例

响应式图像

可以将图像设置为自动调整自身大小以适合其容器的大小。

如果要根据需要缩小图像，但绝不要放大到大于原始大小，请使用 w3-image类。

实例

尝试一下 »

点击“尝试一下”按钮查看在线实例

如果您希望图像在响应度上上下缩放，请将 CSS width 属性设置为 100％：

实例

尝试一下 »

点击“尝试一下”按钮查看在线实例

如果要将响应图像限制为最大大小，请使用 max-width 属性：

实例

尝试一下 »

点击“尝试一下”按钮查看在线实例

不透明度

w3-opacity 类使图像透明：

实例

尝试一下 »

点击“尝试一下”按钮查看在线实例

灰度

使用 w3-grayscale类为图像增加一个灰度效果：

实例

尝试一下 »

点击“尝试一下”按钮查看在线实例

提示：IE 11和更早版本不支持 w3-grayscale 类。

棕褐色

使用 w3-sepia 类为图像添加棕褐色效果：

实例

尝试一下 »

点击“尝试一下”按钮查看在线实例

提示：IE 11 和更早版本不支持 w3-sepia 类。

悬停效果

您还可以在悬停/鼠标悬停上添加特殊效果。

实例

尝试一下 »

点击“尝试一下”按钮查看在线实例

关闭不透明度

w3-hover-opacity 类添加鼠标悬停在图像上时的透明度，w3-hover-opacity-off类去除鼠标悬停透明度。

实例

尝试一下 »

点击“尝试一下”按钮查看在线实例

制作相册

在此示例中，我们使用 W3.CSS 响应网格系统创建在所有设备上看起来都不错的相册。稍后您将详细了解。

实例

蒙特罗索

尝试一下 »

点击“尝试一下”按钮查看在线实例