CSS 图片

本章节将为大家介绍如何使用 CSS 来布局图片。

圆角图片

实例

圆角图片:

img {
border-radius: 8px;
}

尝试一下 »

实例

椭圆形图片:

img {
border-radius: 50%;
}

尝试一下 »

缩略图

我们使用 border 属性来创建缩略图。

实例

img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}

<img src="paris.jpg" alt="Paris">

尝试一下 »

实例

a {
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    transition: 0.3s;
}

a:hover {
    box-shadow: 0 0 2px 1px rgba
    (0, 140, 186, 0.5);
}

<a href="paris.jpg">
<img src="paris.jpg" alt="Paris">
</a>

尝试一下 »

响应式图片

响应式图片会自动适配各种尺寸的屏幕。

实例中，你可以通过重置浏览器大小查看效果:

如果你需要自由缩放图片，且图片放大的尺寸不大于其原始的最大值，则可使用以下代码：

实例

img {
max-width: 100%;
height: auto;
}

尝试一下 »

提示: Web 响应式设计更多内容可以参考 CSS 响应式设计教程。

图片文本

如何定位图片文本:

实例

左下角

左上角

右上角

右下角

居中

尝试一下:

左上角 » 右上角 » 左下角 » 右下角 » 居中 »

卡片式图片

实例

div.polaroid {
    width: 80%;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

img {width: 100%}

div.container {
    text-align: center;
    padding: 10px 20px;
}

尝试一下 »

图片滤镜

CSS filter 属性用为元素添加可视效果 (例如：模糊与饱和度) 。

注意: Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。

实例

修改所有图片的颜色为黑白 (100% 灰度):

img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}