• CSS 工具提示
• CSS object-fit

学习如何使用 CSS 设置图像样式。

圆角图像

使用 border-radius 属性创建圆形图像：

实例

圆角图像:

img {  border-radius: 8px;}

亲自试一试

实例

圆形图像：

img {  border-radius: 50%;}

亲自试一试

缩略图图像

使用 border 属性创建缩略图。

缩略图：

实例

img {  border: 1px solid #ddd;  border-radius: 4px;  padding: 5px;  width: 150px;}<img src="paris.jpg" alt="Paris">

亲自试一试

作为链接的缩略图：

实例

img {  border: 1px solid #ddd;  border-radius: 4px;  padding: 5px;  width: 150px;}img: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;}

亲自试一试

提示：在我们的 CSS RWD 教程 中学习关于响应式 Web 设计的更多知识。

居中图像

如需使图像居中，请将左右外边距设置为 auto 并将其设置为块元素：

实例

img {  display: block;  margin-left: auto;  margin-right: auto;  width: 50%;}

亲自试一试

宝丽来图片 / 卡片

黄色郁金香

红色郁金香

实例

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;}

亲自试一试

透明图像

opacity 属性的取值范围为 0.0 - 1.0。值越低，越透明：

opacity 0.2

opacity 0.5

opacity 1（默认）

实例

img {  opacity: 0.5;}

亲自试一试

图像文本

如何在图像中定位文本：

实例

Bottom Left

Top Left

Top Right

Bottom Right

Centered

亲自试一试：

左上右上左下右下居中

图像滤镜

CSS filter 属性把视觉效果（如模糊和饱和度）添加到元素。

注意：Internet Explorer 或 Edge 12 不支持 filter 属性。

实例

把所有图像的颜色更改为黑白（100％ 灰色）：

img {  filter: grayscale(100%);}

亲自试一试

提示：请访问我们的 CSS 滤镜参考手册，了解有关 CSS 滤镜的更多信息。

图像悬停叠加

创建鼠标悬停时的叠加效果：

实例 1

淡入文本：

Hello World

亲自试一试

实例 2

淡入框：

Bill

亲自试一试

实例 3

滑入（上）：

Hello World

亲自试一试

实例 4

滑入（下）：

Hello World

亲自试一试

实例 5

滑入（左）：

Hello World

亲自试一试

实例 6

滑入（右）：

Hello World

亲自试一试

翻转图像

请把鼠标移到图像上：

实例

img:hover {  transform: scaleX(-1);}

亲自试一试

响应式图库

我们可以使用 CSS 创建自适应的图片库。

本例使用媒体查询来重新排列不同屏幕尺寸的图像。请调整浏览器窗口的大小以查看效果：

实例

.responsive {  padding: 0 6px;  float: left;  width: 24.99999%;}@media only screen and (max-width: 700px){  .responsive {    width: 49.99999%;    margin: 6px 0;  }}@media only screen and (max-width: 500px){  .responsive {    width: 100%;  }}

亲自试一试

提示：请在我们的 CSS RWD 教程 中学习有关响应式 Web 设计的更多知识。

图像模态（Image Modal）

这是一个演示 CSS 和 JavaScript 如何协同工作的例子。

首先，请使用 CSS 创建模态窗口（对话框），并默认将其隐藏。

然后，当用户单击图像时，使用 JavaScript 显示模态窗口并在模态内部显示图像：

×

亲自试一试

• CSS 工具提示
• CSS object-fit