CSS 样式图片
学习如何使用 CSS 样式图片。
圆角图片
使用 border-radius 属性创建圆角图片
缩略图图片
使用 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>
试试看 »
响应式图片
响应式图片会自动调整大小以适应屏幕尺寸。
调整浏览器窗口大小以查看效果
如果希望图片缩小以适应，但绝不放大超过其原始尺寸，请添加以下代码
提示： 在我们的 CSS RWD 教程 中了解更多关于响应式网页设计的内容。
居中图片
要居中图片，请将左右边距设置为 auto，并将图片转换为 block 元素
拍立得图片 / 卡片
五渔村
北极光
示例
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
(默认)
图片文本
如何在图片中放置文本
图像滤镜
CSS 的 filter 属性为元素添加视觉效果（例如模糊和饱和度）。
注意：filter 属性在 Internet Explorer 或 Edge 12 中不受支持。
提示：访问我们的 CSS 滤镜参考，了解有关 CSS 滤镜的更多信息。
图像悬停叠加
创建悬停叠加效果
翻转图像
将鼠标悬停在图像上
响应式图片库
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 教程 中了解更多关于响应式网页设计的内容。
图像模态（高级）
这是一个演示 CSS 和 JavaScript 如何协同工作的示例。
首先，使用 CSS 创建一个模态窗口（对话框），并默认将其隐藏。
然后，使用 JavaScript 在用户点击图像时显示模态窗口并在模态窗口中显示图像（使用图像的“alt”文本作为标题）。
示例
// 获取模态
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;
}
// 获取关闭模态的<span> 元素
var span = document.getElementsByClassName("close")[0];
// 当用户点击<span>（x）时，关闭模态
span.onclick = function() {
modal.style.display = "none";
}
试试看 »
× ![]()
