CSS 样式化图片
❮ 上一篇 下一篇 ❯
了解如何使用 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 { 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);}
自己动手试一试 »
响应式图片
响应式图片将自动适应屏幕大小。
调整浏览器窗口大小以查看效果
如果你希望图片在必要时缩小，但其尺寸永不大于原始尺寸，请添加以下内容
示例
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;}
自己动手试一试 »
图像文本
如何在图片中放置文本
示例
左下角
左上角
右上角
右下角
居中
亲自尝试
左上角 » 右上角 » 左下角 » 右下角 » 居中 »
图像滤镜
CSS filter 属性为元素添加视觉效果（如模糊和饱和度）。
注意： Internet Explorer 或 Edge 12 不支持 filter 属性。
示例
将所有图像的颜色更改为黑白（100% 灰色）
img { filter: grayscale(100%);}
自己动手试一试 »
提示：前往我们的 CSS filter 参考 了解更多关于 CSS filters 的信息。
图片悬停叠加
悬停时创建叠加效果
示例
淡入文本
你好世界
自己动手试一试 »
示例
淡入框
John
自己动手试一试 »
示例
滑入（顶部）
你好世界
自己动手试一试 »
示例
滑入（底部）
你好世界
自己动手试一试 »
示例
滑入（左侧）
你好世界
自己动手试一试 »
示例
滑入（右侧）
你好世界
自己动手试一试 »
翻转图片
将鼠标移到图片上
示例
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 设计的信息。
图片模态框（高级）
这是一个演示 CSS 和 JavaScript 如何协同工作的示例。
首先，使用 CSS 创建一个模态窗口（对话框），并将其默认隐藏。
然后，当用户单击图片时，使用 JavaScript 显示模态窗口并在模态框内显示图片
示例
// 获取模态框var modal = document.getElementById('myModal');// 获取图片并将其插入模态框 - 使用其“alt”文本作为标题var img = document.getElementById('myImg');var modalImg = document.getElementById("img01");var captionText = document.getElementById("caption");img.onclick = function(){ modal.style.display = "block"; modalImg.src = this.src; captionText.innerHTML = this.alt;}// 获取关闭模态框的 元素var span = document.getElementsByClassName("close")[0];// 当用户点击 (x) 时，关闭模态框span.onclick = function() { modal.style.display = "none";}
自己动手试一试 »
×
❮ 上一篇 下一篇 ❯
★ +1
W3schools 学习路径
跟踪您的进度 - 免费！
登录 注册